JavaWeb开发（前端Web开发）

文章目录

• 点击前往

VS Code下载安装教程：https://blog.csdn.net/weixin_44904239/article/details/120951203 点击前往

VS Code所需插件安装（需要连接网络）

1. Chinese (Simplified) (简体中文) Language Pack for Visual

适用于 VS Code 的中文 (简体) 语言包

2. Code Spell Checker

代码拼写检查器：一个基本的拼写检查程序，可以很好地处理代码和文档。这个拼写检查器的目标是帮助捕获常见的拼写错误，同时保持误报的数量较低

3. HTML CSS Support

在编写样式表的时候，自动补全功能大大缩减了编写时间。

4. JavaScript (ES6) code snippets

支持ES6语法提示

5.Mithril Emmet

一个能大幅度提高前端开发效率的一个工具，用于补全代码

6.Path Intellisense

路径提示插件

7.Vue 3 Snippets

在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高开发效率。

8.VueHelper

VS Code最好的vue代码提示插件，不仅包括了vue2所有api，还含有vue-router2和vuex2的代码

9.Auto Close Tag

自动闭合HTML/XML标签

10.Auto Rename Tag

自动完成另一侧标签的同步修改

11.Beautify

格式化html，js，css（安装过程中, 如果提示是否需要继续安装, 选择 “仍要安装”）

12.[Deprecated] Bracket Pair Colorizer 2

给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色（安装过程中, 如果提示是否需要继续安装, 选择 “仍要安装”）

13.open in browser

VS Code不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari

14.Vetur

Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。

15.File Utils

File Utils插件,可以方便快捷的来创建、复制、移动、重命名文件和目录。

16.IntelliJ IDEA Keybindings

安装了IntelliJ IDEA Keybindings即可在VS Code中使用IDEA的快捷键

点击前往

Vue快速入门

• 新建HTML页面，引入Vue.js文件

  <script src="./js/vue.js"></script>
  

• 在JS代码区域，创建Vue核心对象，定义数据模型

  <script>
  	new Vue({
  		el:'#app',
          data:{
  			message:"Hello Vue"
  		}
  	})
  </script>
  

• 编写视图

  <div id="app">
  	<input type="text" v-model="message">
  	{{message}}
  </div>
  

插值表达式

• 形式：{{表达式}}。
• 内容可以是：
  1.变量
  2.三元运算符
  3.函数调用
  4.算术运算

点击前往

Axios入门

• 引入Axios的js文件

  <script src="./js/axios-0.18.0.js"></script>
  

• 使用Axios发送请求，并获取响应结果

  <input type="button" value="获取数据GET" onclick="get()">
  <input type="button" value="删除数据POST" onclick="post()">
  <script>
      function get(){
          //通过axios发送异步请求-get
          axios({
              method:"get",
              url:"http://yapi.smart-xwork.cn/mock/169327/emp/list",
          }).then((result)=>{
              console.log(result.data);
          });
      }
      function post(){
          //通过axios发送异步请求-post
          axios({
              method:"post",
              url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
              data:"id=1"
          }).then((result)=>{
              console.log(result.data);
          });
      }
  </script>
  

Axios请求方式别名

• axios.get(url [,config])

• axios.delete(url [,config])

• axios.post(url [,data[,config]])

• axios.put(url [,data[,config]])

  <script>
      function get(){
          //通过axios发送异步请求-get
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{
              console.log(result.data);
          });
      }
  </script>
  

  <script>
      function post(){
          //通过axios发送异步请求-post
          axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then((result)=>{
              console.log(result.data);
          });
      }
  </script>
  

案例

基于Vue及Axios完成数据的动态加载展示

1. 数据准备的url：http://yapi.smart-xwork.cn/mock/169327/emp/list

2. 加粗样式在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面(性别:1代表男，2 代表女)。

   <div id="app" align="center">
       <table border="1" cellspacing="0" width="60%">
           <tr>
               <th>编号</th>
               <th>姓名</th>
               <th>图像</th>
               <th>性别</th>
               <th>职位</th>
               <th>入职日期</th>
               <th>最后操作时间</th>
           </tr>
           <tr align="center" v-for="(emp,index) in emps">
               <td>{{index + 1}}</td>
               <td>{{emp.name}}</td>
               <td>
                   <img v-bind:src="emp.image" width="70px" height="50px">
               </td>
               <td>
                   <span v-if="emp.gender == 1">男</span>
                   <span v-if="emp.gender == 2">女</span>
               </td>
               <td>{{emp.job}}</td>
               <td>{{emp.entrydate}}</td>
               <td>{{emp.updatetime}}</td>
           </tr>
       </table>
   </div>
   <script>
       new Vue({
           el:"#app",
           data: {
               emps:[]
           },
           mounted() {
               //发送异步请求，加载数据
               axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{
                  this.emps = result.data.data;
               });
           },
       })
   </script>
   

点击前往

1.添加项目
2.添加分类
3.添加接口

点击前往

NodeJS安装

• 双击NodeJS安装包
  

• Next

  

• 勾选→Next

  

• 选择安装路径→Next

  

• Next

  

• Next

  

• Install

  

• 等待安装完成

  

• Finisn

  

• 验证NodeJS环境变量

  

• 配置npm的全局安装路径

  

   ```javascript
   #使用管理员身份运行命令行，在命令行中，执行如下指令：
   #注意：D:\develop\NodeJS 目录是NodeJS的安装目录
   npm config set prefix "D:\develop\NodeJS"
   #查看是否设置成功
   npm config get prefix
   ```
  
   ![在这里插入图片描述](https://img-blog.csdnimg.cn/31fe5046fe304bf29ecca2fca97f295b.png)
  

• 切换npm的淘宝镜像

  #使用管理员身份运行命令行，在命令行中，执行如下指令：
  npm config set registry https://registry.npm.taobao.org
  

  

• 安装Vue-cli

  #使用管理员身份运行命令行，在命令行中，执行如下指令：(安装过程中会联网下载，需要等待几分钟)
  npm install -g @vue/cli
  

  

  #执行命令查看是否安装成功
  vue --version
  

  

点击前往

点击前往

下载

稳定版本下载

安装

将下载的压缩包解压到没有中文的目录下

Nginx目录介绍

• 项目部署

  • 部署：将打包好的 dist 目录下的文件，复制到nginx安装目录的html目录下。

  

  • 启动：双击nginx.exe 文件即可，Nginx服务器默认占用
    80端口号。

  

  启动nginx后查看任务管理器是否有nginx进程，没有的话查看logs目录下的error.log是否报错（下面是80端口被占用报错，导致nginx没有启动）

  

  • 修改nginx端口号：修改conf目录下的nginx.conf文件，将其端口号改为90
    

  重新启动nginx后查看任务管理器有了nginx进程，nginx启动成功。浏览器访问：http://localhost:90/ 即可访问成功

  

此文档来源于网络,如有侵权，请联系删除！