[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署

目录

一  什么是Vue

 1.1 Vue快速入门

1.2 常用指令

 1.2.1 v-bind && v-model

 1.2.2 v-on

 1.2.3 v-if && v-show

1.2.4 v-for

1.2.5 案例

1.3 生命周期

二 Ajax

2.1 Ajax介绍

 2.2 同步与异步

 2.3 原生Ajax（繁琐，过时了）

2.4 Axios 【重点】

2.4.1 Axios介绍

2.4.2 Axios入门

2.4.3 案例

三 前后端分离开发

3.1 前后端混合开发

3.2 前后端分离开发

3.2.1 介绍前后端分离开发

 3.2.2 界面原型

 3.2.3 接口文档示例

3.2.3.1 根据ID查询员工

3.2.3.1.1 基本信息

3.2.3.1.2 请求参数

3.2.3.1..3 响应数据

 3.2.4 YAPI接口文档管理平台

 3.2.4.1 添加项目

 3.2.4.2 添加分类

 3.2.4.3 添加接口

 3.2.4.4 编辑接口

 3.2.4.5 高级Mock

四 前端工程化

4.1 环境准备（vue-cli 脚手架）

 4.1.1 安装node.js

4.1.1.1. 双击资料中提供的安装包

4.1.1.2. 选择安装目录

4.1.1.3. 验证NodeJS环境变量

4.1.1.4. 配置npm的全局安装路径

4.1.1.5. 切换npm的淘宝镜像

4.1.1.6. 安装Vue-cli

4.2 Vue项目简介

4.2.1 Vue项目创建

 4.2.1.1 创建一个vue目录，cmd输入vue ui

4.2.1.2 创建

4.2.2 Vue项目-目录结构

 4.2.3 Vue项目-启动

 4.2.4 Vue项目-配置端口

4.3 Vue项目开发流程

五 Vue组件库Element

5.1 Element快速入门

5.1.1 安装组件

5.1.2main.js 引入ElementUi组件库，记得保存

5.1.3 views目录下新建emement文件夹，再新建ElementView.vue文件

 5.1.4 根组件App.vue 引入ElementView.vue

 5.1.5 启动项目

5.2 常见组件

5.2.1 常见组件-表格

 5.2.2 常见组件-分页

 5.2.2.1 事件

 5.2.2.2 复制代码

5.2.3 常见组件-对话框

 5.2.4 常见组件-表单

5.2.5 常见组件-Container布局容器

5.3 案例

5.3.1 实现效果目标：

 5.3.2 分析

 5.3.3 views下新建study文件夹再新建EmpView.vue文件

5.3.4 修改App.vue

 5.3.5 框架布局

​编辑 5.3.6 查询条件Form表单布局

5.3.6.1 日期控件

 5.3.6.2 查询表单设置完毕

 5.3.7 分页条

 5.3.8 列表数据异步加载，并渲染展示

5.3.8.1 安装Axios

5.3.8.2 引入Axios 

六 Vue路由

 6.1 安装路由

6.2 定义路由

6.2.1 先在 views-》study文件夹再新建DeptView.vue文件，

6.2.2 修改APP.vue（配置动态路由方式）

6.2.3 定义路由以及重定向 

 6.3 案例：完成左侧菜单切换效果

 6.3.1 EmpView.vue

 6.3.2 DeptView.vue

七 打包

八 部署

 8.1 下载安装ngnix

 8.2 部署

 8.3 启动

8.3.1 如果进程没有查看错误日志 

 8.3.2 变更ngnix端口(访问需要加端口)

---

前言：Vue学习：快速入门、常用指令、生命周期等；Ajax、Element、打包部署等

一  什么是Vue

 1.1 Vue快速入门

    
    
    
    
    



    

        
        {{message}}
    

1.2 常用指令

 1.2.1 v-bind && v-model

    
    
    
    
    


    


        链接1
        链接2

        

    

 1.2.2 v-on

 1.2.3 v-if && v-show

    
    
    
    
    


    

        
        年龄经判定,为:
        年轻人(35及以下)
        中年人(35-60)
        老年人(60及以上)

        



        年龄经判定,为:
        年轻人(35及以下)
        中年人(35-60)
        老年人(60及以上)

    

1.2.4 v-for

    
    
    
    
    


    


        
{{addr}}

        


        
{{index + 1}} : {{addr}}

    

1.2.5 案例

 

    
    
    
    
    


    
    

        
        

            

                
编号
                
姓名
                
年龄
                
性别
                
成绩
                
等级
            

            

                
{{index + 1}}
                
{{user.name}}
                
{{user.age}}
                

                    男
                    女
                
                
{{user.score}}
                

                    优秀
                    及格
                    不及格
                
            
        

    

 

1.3 生命周期

 

二 Ajax

2.1 Ajax介绍

 2.2 同步与异步

 

 2.3 原生Ajax（繁琐，过时了）

 

2.4 Axios 【重点】

2.4.1 Axios介绍

2.4.2 Axios入门

 

  

 

2.4.3 案例

    
    
    
    
    
    


    

        

            

                
编号
                
姓名
                
图像
                
性别
                
职位
                
入职日期
                
最后操作时间
            

            

                
{{index + 1}}
                
{{emp.name}}
                

                    
                
                

                    男
                    女
                
                
{{emp.job}}
                
{{emp.entrydate}}
                
{{emp.updatetime}}
            
        
    

三 前后端分离开发

3.1 前后端混合开发

3.2 前后端分离开发

3.2.1 介绍前后端分离开发

 3.2.2 界面原型

https://download.csdn.net/download/legend818/88222560

 3.2.3 接口文档示例

3.2.3.1 根据ID查询员工

3.2.3.1.1 基本信息

请求路径：/emp

请求方式：GET

接口描述：该接口用于根据ID查询员工信息

3.2.3.1.2 请求参数

参数说明：

参数名	类型	是否必须	备注
id	number	必须	员工ID

请求样例：

GET http://localhost:8080/emp?id=15

3.2.3.1..3 响应数据

参数格式：application/json

参数说明：

名称	类型	是否必须	备注	其他信息
code	number	必须	响应码, 1 成功 , 0 失败
msg	string	非必须	提示信息
data	object	必须	返回的数据
|- id	number	非必须	id
|- name	string	非必须	姓名
|- gender	number	非必须	性别 , 1 男 ; 2 女
|- image	string	非必须	图像
|- job	number	非必须	职位
|- entrydate	string	非必须	入职日期
|- updateTime	string	非必须	更新时间

响应数据样例：

{
    "code": 1,
    "message": "success",
    "data": {
        "id": 15,
        "name": "谢逊",
        "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
        "gender": 1,
        "job": "班主任",
        "entrydate": "2008-05-09",
        "updatetime": "2022-10-01 12:00:00"
    }
}

 3.2.4 YAPI接口文档管理平台

 3.2.4.1 添加项目

 3.2.4.2 添加分类

 3.2.4.3 添加接口

 

 

 3.2.4.4 编辑接口

 

 

 

 

 3.2.4.5 高级Mock

 

四 前端工程化

 

4.1 环境准备（vue-cli 脚手架）

 4.1.1 安装node.js

NodeJS安装

4.1.1.1. 双击资料中提供的安装包

4.1.1.2. 选择安装目录

选择安装到一个，没有中文，没有空格的目录下（新建一个文件夹NodeJS）

4.1.1.3. 验证NodeJS环境变量

NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过： node -v

4.1.1.4. 配置npm的全局安装路径

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set prefix "E:\develop\NodeJS"

查看是否成功

我是：npm config set prefix "D:\Program Files\nodejs"

注意：E:\develop\NodeJS 这个目录是NodeJS的安装目录

 <这里我出现了一个错误：npm WARN config global `--global`, `--local` are deprecated. Use `--location报错>

【解决方案：找到将npm、npm.cmd、npx、npx.cmd中的 prefix -g 替换为 prefix --location=global 。一定要将这4个文件夹的权限修改为完全控制】

4.1.1.5. 切换npm的淘宝镜像

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set registry https://registry.npm.taobao.org

4.1.1.6. 安装Vue-cli

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm install -g @vue/cli

这个过程中，会联网下载，可能会耗时几分钟，耐心等待。

我的是：

检查：vue --version

4.2 Vue项目简介

4.2.1 Vue项目创建

 4.2.1.1 创建一个vue目录，cmd输入vue ui

 

4.2.1.2 创建

 

 

 

 

 耐心等待

4.2.2 Vue项目-目录结构

 4.2.3 Vue项目-启动

 

插曲：Visual Studio Code中npm脚本找不到 

 

 4.2.4 Vue项目-配置端口

 

 ctrl+ c

 修改需要重启服务 

4.3 Vue项目开发流程

 

  

五 Vue组件库Element

5.1 Element快速入门

5.1.1 安装组件

插曲：npm运行脚本不见了，这样能切换回来

 

npm install [email protected]

 

5.1.2main.js 引入ElementUi组件库，记得保存

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入ElementUI 组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

5.1.3 views目录下新建emement文件夹，再新建ElementView.vue文件

 

 

 

上官网的button组件，复制代码

Element - The world's most popular Vue UI framework 

 

 

 5.1.4 根组件App.vue 引入ElementView.vue

输入会自动引入import

 

 5.1.5 启动项目

 

5.2 常见组件

5.2.1 常见组件-表格

 

ElementView.vue 注意除了复制template部分还需要复制数据模型部分

 

要了解表格属性，看官方表格的最下方

 

 5.2.2 常见组件-分页

 

 根据属性修改

 

 

 5.2.2.1 事件

 5.2.2.2 复制代码

 

 

 

5.2.3 常见组件-对话框

 

 

 

 

 5.2.4 常见组件-表单

 

 没有使用表单的全部内容删除了部分字段

5.2.5 常见组件-Container布局容器

 

5.3 案例会使用（略）

5.3 案例

原型见 智能学习辅助系统原型下载 打开直接点登录--》员工管理

5.3.1 实现效果目标：

 5.3.2 分析

 

 5.3.3 views下新建study文件夹再新建EmpView.vue文件

5.3.4 修改App.vue

输

 5.3.5 框架布局

 

 通过实例复制优化代码

 

布局完成

 5.3.6 查询条件Form表单布局

5.3.6.1 日期控件

 

 5.3.6.2 查询表单设置完毕

 

 5.3.7 分页条

 5.3.8 列表数据异步加载，并渲染展示

5.3.8.1 安装Axios

npm install axios

 

5.3.8.2 引入Axios 

import axios from 'axios';

技巧 ：输入 thenc 回车即可

 

 

继续处理上面2个部分 

 

 

 

六 Vue路由

 

 6.1 安装路由

 本文略，因为上面创建项目的时候，勾选了路由自动创建了

 

6.2 定义路由

6.2.1 先在 views-》study文件夹再新建DeptView.vue文件，

6.2.2 修改APP.vue（配置动态路由方式）

6.2.3 定义路由以及重定向 

import Vue from 'vue'
import VueRouter from 'vue-router'
// import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/emp'
  },
  {
    path: '/emp',
    name: 'emp',
    component: () => import('../views/study/EmpView.vue')
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/study/DeptView.vue')
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

 6.3 案例：完成左侧菜单切换效果

 6.3.1 EmpView.vue

 

 

 6.3.2 DeptView.vue

  

七 打包

 

 

 

 

八 部署

 8.1 下载安装ngnix

 

 8.2 部署

ngnix--》html目录下的初始化文件可删除了，再复制dist

 8.3 启动

 启动一闪而过，什么情况，查看进程，发现有ngnix.exe

 输入：http://localhost/  可访问系统

8.3.1 如果进程没有查看错误日志 

# cmd查看80端口被占用命令
netstat -ano | findStr 80

 8.3.2 变更ngnix端口(访问需要加端口)

conf --->  ngnix.conf