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

这篇具有很好参考价值的文章主要介绍了[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

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 1.1 Vue快速入门

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-快速入门</title>
    <script src="js/vue.js"></script>
</head>
<body>

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

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>
</html>

1.2 常用指令

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 1.2.1 v-bind && v-model

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-bind</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>

        <input type="text" v-model="url">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           url: "https://www.baidu.com"
        }
    })
</script>
</html>

 1.2.2 v-on

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-on</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <input type="button" value="点我一下" v-on:click="handle()">

        <input type="button" value="点我一下" @click="handle()">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            handle: function(){
                alert("你点我了一下...");
            }
        }
    })
</script>
</html>

 1.2.3 v-if && v-show

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>

        <br><br>

        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age > 35 && age < 60">中年人(35-60)</span>
        <span v-show="age >= 60">老年人(60及以上)</span>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
</script>
</html>

1.2.4 v-for

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <div v-for="addr in addrs">{{addr}}</div>

        <hr>

        <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
            
        }
    })
</script>
</html>

1.2.5 案例

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-案例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(user,index) in users">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>
</html>

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

1.3 生命周期

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>
</html>

二 Ajax

2.1 Ajax介绍

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 2.2 同步与异步

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 2.3 原生Ajax(繁琐,过时了)

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

2.4 Axios 【重点】

2.4.1 Axios介绍

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

2.4.2 Axios入门

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    
    <input type="button" value="获取数据GET" onclick="get()">

    <input type="button" value="删除数据POST" onclick="post()">

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


        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
        // axios.get("http://199.28.10.137:8081/api/mock/100012/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);
        // })

        axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
        // axios.post("http://199.28.10.137:8081/api/mock/100012/emp/deleteById","id=1").then(result => {
            console.log(result.data);
        })
    }
</script>
</html>

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

2.4.3 案例

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios-案例</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <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 :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>
</body>
<script>
    new Vue({
       el: "#app",
       data: {
         emps:[]
       },
       mounted () {
          //发送异步请求,加载数据
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
        // axios.get("http://199.28.10.137:8081/api/mock/100012/emp/list").then(result => {
            this.emps = result.data.data;
          })
       }
    });
</script>
</html>

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

三 前后端分离开发

3.1 前后端混合开发

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

3.2 前后端分离开发

3.2.1 介绍前后端分离开发

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 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接口文档管理平台

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 3.2.4.1 添加项目

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 3.2.4.2 添加分类

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 3.2.4.3 添加接口

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 3.2.4.4 编辑接口

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 3.2.4.5 高级Mock

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

四 前端工程化

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

4.1 环境准备(vue-cli 脚手架)

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 4.1.1 安装node.js

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

NodeJS安装

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

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

4.1.1.2. 选择安装目录

选择安装到一个,没有中文,没有空格的目录下(新建一个文件夹NodeJS)

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

4.1.1.3. 验证NodeJS环境变量

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

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

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

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

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

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

查看是否成功

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

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

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

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

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

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

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

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

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

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

我的是:

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

检查:vue --version

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

4.2 Vue项目简介

4.2.1 Vue项目创建

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

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

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

4.2.1.2 创建

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 耐心等待

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

4.2.2 Vue项目-目录结构

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 4.2.3 Vue项目-启动

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

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

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 4.2.4 Vue项目-配置端口

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 ctrl+ c

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 修改需要重启服务 

4.3 Vue项目开发流程

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

  

五 Vue组件库Element

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

5.1 Element快速入门

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

5.1.1 安装组件

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

插曲:npm运行脚本不见了,这样能切换回来[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 文章来源地址https://www.toymoban.com/news/detail-662126.html

npm install element-ui@2.15.3

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

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文件

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element 

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element 

 

<template>
    
</template>

<script>
export default {
    
}
</script>

<style>

</style>

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

Element - The world's most popular Vue UI framework 

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 

 

<template>
    <div>
        <!-- button按钮-->
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
      </el-row>
    </div>
    
</template>

<script>
export default {
    
}
</script>

<style>

</style>

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

输入<element-view></element-view>会自动引入import

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 

<template>
  <div>
      <!-- <h1>{{message}}</h1> -->
      <element-view></element-view>
  </div>
</template>

<script>
import ElementView from './views/element/ElementView.vue'
export default {
  components: { ElementView },
  data () {
    return {
      message: "Hello Vue!"
    }
  },
  methods: {
    
  },
}

</script>


<style>

</style>

 5.1.5 启动项目

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 

5.2 常见组件

5.2.1 常见组件-表格

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

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

<template>
  <div>
    <!-- button按钮-->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <!-- Table 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
    data () {
        return {
                  tableData: [{
          date: '2010-05-02',
          name: '舒淇',
          address: '香港鹏罗湾区18 弄'
        }, {
          date: '2011-05-04',
          name: '黑泽',
          address: '岛国74i弄'
        }, {
          date: '2013-05-01',
          name: '伊莲娜',
          address: '漂亮国111弄'
        }, {
          date: '2014-05-03',
          name: '邱淑贞',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
        }
    }

};
</script>

<style>
</style>

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element 

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

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 

 5.2.2 常见组件-分页

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element 

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 根据属性修改

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 5.2.2.1 事件

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 5.2.2.2 复制代码

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 

<template>
  <div>
    <!-- button按钮-->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <br />
    <!-- Table 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <!-- Pagination 分页 -->
    <el-pagination
      background
      layout="sizes, prev, pager, next, jumper, total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="1000"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2010-05-02",
          name: "舒淇",
          address: "香港鹏罗湾区18 弄",
        },
        {
          date: "2011-05-04",
          name: "黑泽",
          address: "岛国74i弄",
        },
        {
          date: "2013-05-01",
          name: "伊莲娜",
          address: "漂亮国111弄",
        },
        {
          date: "2014-05-03",
          name: "邱淑贞",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  // 新增这2个方法
  methods: {
    handleSizeChange:function(val){
        alert("每页记录数变化" + val)

    },
    handleCurrentChange:function(val){
        alert("页码发生变化" + val)

    }
  },
};
</script>

<style>
</style>

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

5.2.3 常见组件-对话框

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 

 

<template>
  <div>
    <!-- button按钮-->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <br />
    <!-- Table 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <!-- Pagination 分页 -->
    <el-pagination
      background
      layout="sizes, prev, pager, next, jumper, total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="1000"
    >
    </el-pagination>
    <br /><br />
    <!-- Dialog 对话框 -->
    <!-- Table -->
    <el-button type="text" @click="dialogTableVisible = true"
      >打开嵌套表格的 Dialog</el-button
    >

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column
          property="date"
          label="日期"
          width="150"
        ></el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,
      tableData: [
        {
          date: "2010-05-02",
          name: "舒淇",
          address: "香港鹏罗湾区18 弄",
        },
        {
          date: "2011-05-04",
          name: "黑泽",
          address: "岛国74i弄",
        },
        {
          date: "2013-05-01",
          name: "伊莲娜",
          address: "漂亮国111弄",
        },
        {
          date: "2014-05-03",
          name: "邱淑贞",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  // 新增这2个方法
  methods: {
    handleSizeChange: function (val) {
      alert("每页记录数变化" + val);
    },
    handleCurrentChange: function (val) {
      alert("页码发生变化" + val);
    },
  },
};
</script>

<style>
</style>

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 5.2.4 常见组件-表单

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element 

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

<template>
  <div>
    <!-- button按钮-->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <br />
    <!-- Table 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <!-- Pagination 分页 -->
    <el-pagination
      background
      layout="sizes, prev, pager, next, jumper, total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="1000"
    >
    </el-pagination>
    <br /><br />
    <!-- Dialog 对话框 -->
    <!-- Table -->
    <el-button type="text" @click="dialogTableVisible = true"
      >打开嵌套表格的 Dialog</el-button
    >

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column
          property="date"
          label="日期"
          width="150"
        ></el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>

    <br /><br />
    <!-- Dialog 对话框 里面展示Form表单-->
    <el-button type="text" @click="dialogFormVisible = true"
      >打开嵌套Form表单 Dialog</el-button
    >

    <el-dialog title="Form表单" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.date1"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker
              placeholder="选择时间"
              v-model="form.date2"
              style="width: 100%"
            ></el-time-picker>
          </el-col>
        </el-form-item>      
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',          
        },
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      tableData: [
        {
          date: "2010-05-02",
          name: "舒淇",
          address: "香港鹏罗湾区18 弄",
        },
        {
          date: "2011-05-04",
          name: "黑泽",
          address: "岛国74i弄",
        },
        {
          date: "2013-05-01",
          name: "伊莲娜",
          address: "漂亮国111弄",
        },
        {
          date: "2014-05-03",
          name: "邱淑贞",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  // 新增这2个方法
  methods: {
    handleSizeChange: function (val) {
      alert("每页记录数变化" + val);
    },
    handleCurrentChange: function (val) {
      alert("页码发生变化" + val);
    },
    onSubmit:function(){
        alert(JSON.stringify(this.form));
    }
  },
};
</script>

<style>
</style>

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

5.2.5 常见组件-Container布局容器

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 

5.3 案例会使用(略)

5.3 案例

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

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

5.3.1 实现效果目标:

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 5.3.2 分析

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 

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

<template>
    <div></div>
</template>

<script>
export default {
    
}
</script>


<style>

</style>

5.3.4 修改App.vue

输<emq + Enter 会自动导入import

<template>
  <div>
      <!-- <h1>{{message}}</h1> -->
      <!-- <element-view></element-view>   这个是之前的页面1-->

      <!-- 员工管理 -->
     <emp-view></emp-view>
  </div>
</template>

<script>
import EmpView from './views/study/EmpView.vue'
/*  import ElementView from './views/element/ElementView.vue'  这个是之前的页面1 */
export default {
  components: {EmpView /* ElementView  这个是之前的页面1 */},
  data () {
    return {
      message: "Hello Vue!"
    }
  },
  methods: {
    
  },
}

</script>


<style>

</style>


<!--
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

-->

 5.3.5 框架布局

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 

<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {};
</script>


<style>
</style>

 通过实例复制优化代码

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >sunperman 智能女友系统</el-header
      >
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>系统管理</template
              >
              <el-menu-item index="1-1">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main
          ><el-table :data="tableData"  border>
            <el-table-column
              prop="name"
              label="姓名"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="image"
              label="图像"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="gender"
              label="性别"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="job"
              label="职位"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="entrydate"
              label="入职日期"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="updatetime"
              label="最后操作时间"
              width="230"
            ></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table></el-main
        >
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
    data () {
        return {
           tableData: []
        }
    }
};
</script>


<style>
</style>

布局完成

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element 5.3.6 查询条件Form表单布局

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

5.3.6.1 日期控件

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element 

 5.3.6.2 查询表单设置完毕

 

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >sunperman 智能女友系统</el-header
      >
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>系统管理</template
              >
              <el-menu-item index="1-1">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 表单 查询条件 -->
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>

            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="入职日期">
              <!-- 日期选择器 -->
              <el-date-picker
                v-model="searchForm.entrydata"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格  列表-->
          <el-table :data="tableData" border>
            <el-table-column
              prop="name"
              label="姓名"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="image"
              label="图像"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="gender"
              label="性别"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="job"
              label="职位"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="entrydate"
              label="入职日期"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="updatetime"
              label="最后操作时间"
              width="230"
            ></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table></el-main
        >
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
      },
      entrydata: []
    };
  },
  methods: {
    onSubmit: function () {
      alert("查询数据");
    },
  },
};
</script>


<style>
</style>

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 5.3.7 分页条

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >sunperman 智能女友系统</el-header
      >
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>系统管理</template
              >
              <el-menu-item index="1-1">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 表单 查询条件 -->
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>

            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="入职日期">
              <!-- 日期选择器 -->
              <el-date-picker
                v-model="searchForm.entrydata"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格  列表-->
          <el-table :data="tableData" border>
            <el-table-column
              prop="name"
              label="姓名"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="image"
              label="图像"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="gender"
              label="性别"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="job"
              label="职位"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="entrydate"
              label="入职日期"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="updatetime"
              label="最后操作时间"
              width="230"
            ></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
          <br>
          <!-- 分页条 -->·
        <el-pagination
            background
            layout="sizes, prev, pager, next, jumper, total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="1000">
       </el-pagination>
          
          </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
      },
      entrydata: []
    };
  },
  methods: {
    handleSizeChange: function (val) {
      alert("每页记录数变化" + val);
    },
    handleCurrentChange: function (val) {
      alert("页码发生变化" + val);
    },
    onSubmit: function () {
      alert("查询数据");
    },
  },
};
</script>


<style>
</style>

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

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

5.3.8.1 安装Axios
npm install axios

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

5.3.8.2 引入Axios 
import axios from 'axios';

技巧 :输入 thenc 回车即可

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >sunperman 智能女友系统</el-header
      >
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>系统管理</template
              >
              <el-menu-item index="1-1">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 表单 查询条件 -->
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>

            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="入职日期">
              <!-- 日期选择器 -->
              <el-date-picker
                v-model="searchForm.entrydata"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格  列表-->
          <el-table :data="tableData" border>
            <el-table-column
              prop="name"
              label="姓名"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="image"
              label="图像"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="gender"
              label="性别"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="job"
              label="职位"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="entrydate"
              label="入职日期"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="updatetime"
              label="最后操作时间"
              width="230"
            ></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
          <br>
          <!-- 分页条 -->·
        <el-pagination
            background
            layout="sizes, prev, pager, next, jumper, total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="1000">
       </el-pagination>
          
          </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
      },
      entrydata: []
    };
  },
  methods: {
    handleSizeChange: function (val) {
      alert("每页记录数变化" + val);
    },
    handleCurrentChange: function (val) {
      alert("页码发生变化" + val);
    },
    onSubmit: function () {
      alert("查询数据");
    },
  },
  mounted() {
    // 发送异步请求,获取数据  thenc 回车即可
    axios.get("http://199.28.10.137:8081/api/mock/100012/emp/list").then((result) => {
        this.tableData = result.data.data  // result.data 是固定,  再。data 是因为我们需要(我们接口自己定义的是data)json返回的data
    });
  },
};
</script>


<style>
</style>

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

继续处理上面2个部分 

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >sunperman 智能女友系统</el-header
      >
      <el-container>
        <el-aside width="230px" style="border: 1px solid #eee">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>系统管理</template
              >
              <el-menu-item index="1-1">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 表单 查询条件 -->
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>

            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="入职日期">
              <!-- 日期选择器 -->
              <el-date-picker
                v-model="searchForm.entrydata"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格  列表-->
          <el-table :data="tableData" border>
            <el-table-column prop="name" label="姓名"  width="180"></el-table-column>
            <el-table-column prop="image" label="图像" width="180">
                <template slot-scope="scope">
                            <img :src="scope.row.image" width="100px" height="70px">               
                        </template>
            </el-table-column>
            <el-table-column label="性别" width="140">
                        <template slot-scope="scope">
                            {{scope.row.gender == 1 ? '男' : '女'}}                
                        </template>
            </el-table-column>
            <el-table-column prop="job" label="职位" width="140"></el-table-column>
            <el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
            <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
          <br>
          <!-- 分页条 -->·
        <el-pagination
            background
            layout="sizes, prev, pager, next, jumper, total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="1000">
       </el-pagination>
          
          </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
      },
      entrydata: []
    };
  },
  methods: {
    handleSizeChange: function (val) {
      alert("每页记录数变化" + val);
    },
    handleCurrentChange: function (val) {
      alert("页码发生变化" + val);
    },
    onSubmit: function () {
      alert("查询数据");
    },
  },
  mounted() {
    // 发送异步请求,获取数据  thenc 回车即可
    axios.get("http://199.28.10.137:8081/api/mock/100012/emp/list").then((result) => {
        this.tableData = result.data.data  // result.data 是固定,  再。data 是因为我们需要(我们接口自己定义的是data)json返回的data
    });
  },
};
</script>


<style>
</style>

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 

六 Vue路由

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 6.1 安装路由

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

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 

6.2 定义路由

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

<template>
    <div></div>
</template>

<script>
export default {
    
}
</script>

<style>

</style>

6.2.2 修改APP.vue(配置动态路由方式)

<template>
  <div>
      <!-- <h1>{{message}}</h1> -->
      <!-- <element-view></element-view>   这个是之前的页面1-->

    <!-- 有路由之后,就可以通过合作方式,动态展示 -->
      <router-view></router-view>   
      <!-- 员工管理 -->
     <!-- <emp-view></emp-view> -->
  </div>
</template>

<script>

/* import EmpView from './views/study/EmpView.vue' */
/*  import ElementView from './views/element/ElementView.vue'  这个是之前的页面1 */
export default {
  components: {/* EmpView */ /* ElementView  这个是之前的页面1 */},
  data () {
    return {
      message: "Hello Vue!"
    }
  },
  methods: {
    
  },
}

</script>


<style>

</style>


<!--
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

-->

6.2.3 定义路由以及重定向 

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

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 案例:完成左侧菜单切换效果

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 6.3.1 EmpView.vue

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >sunperman 智能女友系统</el-header
      >
      <el-container>
        <el-aside width="230px" style="border: 1px solid #eee">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>系统管理</template
              >
              <el-menu-item index="1-1">
                 <router-link to="/dept">部门管理</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/emp">员工管理</router-link>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 表单 查询条件 -->
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>

            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="入职日期">
              <!-- 日期选择器 -->
              <el-date-picker
                v-model="searchForm.entrydata"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格  列表-->
          <el-table :data="tableData" border>
            <el-table-column prop="name" label="姓名"  width="180"></el-table-column>
            <el-table-column prop="image" label="图像" width="180">
                <template slot-scope="scope">
                            <img :src="scope.row.image" width="100px" height="70px">               
                        </template>
            </el-table-column>
            <el-table-column label="性别" width="140">
                        <template slot-scope="scope">
                            {{scope.row.gender == 1 ? '男' : '女'}}                
                        </template>
            </el-table-column>
            <el-table-column prop="job" label="职位" width="140"></el-table-column>
            <el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
            <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
          <br>
          <!-- 分页条 -->·
        <el-pagination
            background
            layout="sizes, prev, pager, next, jumper, total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="1000">
       </el-pagination>
          
          </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
      },
      entrydata: []
    };
  },
  methods: {
    handleSizeChange: function (val) {
      alert("每页记录数变化" + val);
    },
    handleCurrentChange: function (val) {
      alert("页码发生变化" + val);
    },
    onSubmit: function () {
      alert("查询数据");
    },
  },
  mounted() {
    // 发送异步请求,获取数据  thenc 回车即可
    axios.get("XXXX/api/mock/100012/emp/list").then((result) => {
        this.tableData = result.data.data  // result.data 是固定,  再。data 是因为我们需要(我们接口自己定义的是data)json返回的data
    });
  },
};
</script>


<style>
</style>

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element 

 

 6.3.2 DeptView.vue

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >sunperman 智能女友系统</el-header
      >
      <el-container>
        <el-aside width="230px" style="border: 1px solid #eee">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>系统管理</template
              >
              <el-menu-item index="1-1">
                 <router-link to="/dept">部门管理</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/emp">员工管理</router-link>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 表单 查询条件 -->
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="名称">
              <el-input v-model="searchForm.name" placeholder="名称"></el-input>
            </el-form-item>    

           
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格  列表-->
          <el-table :data="tableData" border>
            <el-table-column prop="name" label="名称"  width="180"></el-table-column>            
            <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
          <br>
          <!-- 分页条 -->·
        <el-pagination
            background
            layout="sizes, prev, pager, next, jumper, total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="1000">
       </el-pagination>
          
          </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",      
      },     
    };
  },
  methods: {
    handleSizeChange: function (val) {
      alert("每页记录数变化" + val);
    },
    handleCurrentChange: function (val) {
      alert("页码发生变化" + val);
    },
    onSubmit: function () {
      alert("查询数据");
    },
  },
  mounted() {
    // 发送异步请求,获取数据  thenc 回车即可
    axios.get("XXXX/api/mock/100012/dept/list").then((result) => {
        this.tableData = result.data.data  // result.data 是固定,  再。data 是因为我们需要(我们接口自己定义的是data)json返回的data
    });
  },
};
</script>


<style>
</style>

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element  

七 打包

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 [JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 

八 部署

 8.1 下载安装ngnix

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 

 8.2 部署

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

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 8.3 启动

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

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

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

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

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

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

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

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

conf --->  ngnix.conf

[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署,java,前端,vue,Ajax,axios,Element

 

到了这里,关于[JavaWeb]【二】Vue && Ajax && Elemnet &&Vue路由&&打包部署的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微服务部署】四、Jenkins一键打包部署NodeJS(Vue)前端项目步骤详解

      本文介绍使用Jenkins一键将NodeJS(Vue)前端项目打包并上传到生产环境服务器,这里使用的是直接打包静态页面,发送到远程服务器Nginx配置目录的方式,首先确保服务器环境配置好,安装Nginx,运行目录,日志存放目录等。 一、服务器环境配置   Nginx安装也有多种方式

    2024年02月10日
    浏览(44)
  • nginx: 部署前端项目的详细步骤(vue项目build打包+nginx部署)

    目录 第一章 前言 第二章 准备工作 2.1 项目打包理解 2.1.1 打包命令 2.1.2 理解npm run serve/dev 和 npm run build命令 2.2 nginx参数配置理解 2.2.1 nginx常用基本命令 2.2.2 默认配置 2.2.3 搭建不同网站的站点 2.2.4 禁止访问的目录以及一键申请SSL证书验证目录相关设置 2.2.5 根据文件类型设置

    2024年02月04日
    浏览(58)
  • Vue 前端代码多地部署(打包后配置动态IP)

    vue 代码打包之后,需要在多个地方部署。正常操作是:先改 ip 地址,再打包。这样每换一个地方部署,就需要重新打包一次。 下面总结两种方式可以在打包之后动态修改 ip 地址。 在 public 根目录下新建一个 config.json 文件 在需要的页面通过 jQuery 请求 api 数据 打包完之后,

    2024年02月15日
    浏览(48)
  • Gitlab CI/CD 自动化打包部署前端(vue)项目

    一、虚拟机安装 1.vmware下载 2.镜像下载 3.Ubuntu 4.新建虚拟机 一直点下一步,直到点击完成。 5.分配镜像 二、Gitlab CI/CD 自动化部署项目 1.配置GitLab CI/CD: 2.生成SSH密钥对: 如果尚未生成,请在本地机器上生成一个SSH密钥对: 3.将SSH私钥添加到GitLab: 4.更新GitLab CI/CD配置: 5

    2024年03月13日
    浏览(59)
  • vue打包之后的项目在nginx的部署404,以及无法跳转路由问题

    路径都对,项目路由本地也能正常访问,但是部署后加路由地址404。其实就是nginx配置的问题。知乎上一位大哥的解决办法:vue-cli打包之后的项目在nginx的部署404,以及无法跳转路由问题 - 知乎 问题其实就是路由没有重定向。更简单的配置方式就是try_files $uri $uri/ /index.html;  

    2024年02月14日
    浏览(39)
  • JavaWEB学习笔记(二)------HTTP、Servlet、会话、过滤器、监听器、Ajax、前端工程化

    目录 HTTP HTTP1.1 请求和响应的报文格式 请求报文 响应报文 常见状态响应码 Servlet  静态资源和动态资源 ​编辑  Servlet简介  Servlet开发流程 导入和响应头问题 url-pattern不同写法 url-pattern工作方式 Servlet注解方式配置 Servlet生命周期  Servlet继承结构 Servlet接口 GenerisServlet类 Ht

    2024年01月21日
    浏览(40)
  • SpringBoot访问静态资源和jar外部静态资源,部署前端打包后的vue项目放入静态资源里

    记录一下使用SpringBoot访问静态资源和SpringBoot打包之后的jar外部静态资源,在开发的时候,一般选择前后端分离的方式,前端使用vue 后端使用SpringBoot,通常情况下,部署都是前端通过http去请求后端资源,涉及到http请求,那么肯定需要资源的目标地址IP,一般云端部署给到I

    2024年02月09日
    浏览(71)
  • 关于前端vue打包项目以及静态网站部署项目到阿里云ECS云服务器初学简单教程

    准备工作: 1.首先进入https://ecs.console.aliyun.com/ 领取或者购买一台简单的ECS云服务器。 进入网站注册登录后拉到页面最下面或者顶部搜索免费云服务器领取立即试用 ,当然富哥花钱买一台服务器也行。   创建完了以后可以进入云服务ECS工作台,然后就是以下界面   点击右边

    2024年02月04日
    浏览(67)
  • JavaWeb:vue、AJax、ELement、maven、SpringBoot、、Http、Tomcat、请求响应、分层解耦

    VUE是前端框架,基于MVVM,实现数据双向绑定 框架是半基础软件,可重用的代码模型  Vue-cli 是Vue官方提供的一个脚手架,用于快速生成一个 Vue 的项目模板 1 统一的目录结构 2 本地调试 3 热部署:代码变动,不需要重新运行,就可以加载最新的程序 4 单元测试 5 集成打包

    2024年04月14日
    浏览(51)
  • Vue(3)-vue中的Ajax、Vuex、路由及UI组件库

    课程链接 4.1.1.方法一 ​ 在vue.config.js中添加如下配置: 说明: 优点:配置简单,请求资源时直接发给前端(8080)即可。 缺点:不能配置多个代理,不能灵活的控制请求是否走代理。 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务

    2024年02月02日
    浏览(78)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包