Vue-cli&ElementUI

---

前言

文章内容输出来源：拉勾教育JAVA就业训练营

---

1.Vue-cli

1.1 什么是Vue-cli

• Vue cli是基于Vue的应用开发提供的一个标准的脚手架工具.为应用搭建基础的框架结构,提供插件、开发服务、Preset、构建打包功能
• Vue cli 背后集成了现代化开发的诸多功能,通过简单的命令就可以完成 "零配置"的项目环境搭建

1.2 安装Vue-cli步骤

在安装vue-cli前，要确认自己的电脑是否安装了nodejs和npm.

1.2.1 安装Node.js

安装了node.js才有使用npm ，才能安装vue-cli
https://nodejs.org/en/download/

1.2.2 安装NPM

npm全称Node Package Manager，他是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理，NPM 的功能和服务端项目构建工具maven的依赖管理功能差不多，我们通过npm 可以很方便地下载js库，打包js文件。

1.2.3 安装vue-cli

1. 安装命令

npm install -g @vue/cli

2. 输入 vue命令
3. 输入 vue -V 查看版本

1.3 快速构建Vue项目

1.4 项目运行流程

1.4.1 main.js

1. 项目运行 会加载入口文件 main.js

/*
html文件中，通过script src = 'xxx'标签引入js文件。
而vue中，通过 import 变量名 from 文件路径 的方式导入文件，不光可以导入js文件。
1.变量名: 指的是为导入的文件起一个名称，不是指导入的文件的名称，相当于变量名。
2.文件路径: 指的是文件的相对路径
*/
import Vue from 'vue'  
import App from './App.vue'
import router from './router'
//关闭启动提示
Vue.config.productionTip = false
//创建Vue实例
new Vue({
 router, //为整个项目添加路由
 render: h => h(App) //这是一个函数ES6语法,作用是生成模板: App = App.vue
}).$mount('#app') //挂载的是App.vue组件中的id为app的区域

1.4.2 App.vue

2. App.vue 是vue项目的主组件，是页面入口文件 ，所有页面都是在App.vue下进行切换的

App.vue 中的模板(HTML代码)
<template>
 <div id="app"> 挂载的是这个div
  
  <div id="nav">
  这里是两个路由导航链接
   1. to="/" 项目根路径 跳转的是首页
   <router-link to="/">Home</router-link> |
   2. to="/about" 点击About按钮,跳转到about组件
   <router-link to="/about">About</router-link>
  </div>
 
 router-view 的作用是 根据访问的路径,渲染路径匹配到的视图组件
  <router-view/>
 </div>
</template>

1.4.3 router 路由

3. 找到路由文件,来看一下具体的路由配置

// 引入所需文件
import Vue from 'vue'  //vue库
import VueRouter from 'vue-router'  //vue-router库
import Home from '../views/Home.vue' //首页
//使用路由功能
Vue.use(VueRouter)
//创建路由规则
const routes = [
{
path: '/', //路径
  name: 'Home', //名称
  component: Home  //组件 Home.vue
},
{
  path: '/about',
  name: 'About',
  component: () => import(/* webpackChunkName: "about" */
'../views/About.vue')
}
]
//创建路由管理器,管理routes
const router = new VueRouter({
 routes
})
//export 用来导出模块 router就代表了整个路由文件
export default router

1.4.4 Home.vue组件

1. 默认访问的是Home.vue 首页

2.Element-UI

2.1 Element-UI介绍

• element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建
• Element-UI官方站点：
• https://element.eleme.cn/#/zh-CN

2.2 Element-UI使用

2.2.1 命令行方式安装

1. 创建 一个新的项目
2. 当前项目下打开终端, 安装依赖包 ,执行下面的命令

npm i element-ui -S

3. 打开 main.js , 导入Element-UI 相关资源.
   main.js是工程的入口文件，在此文件中加载了很多第三方组件，如：Element-UI、Base64、VueRouter等

//导入组件库
import ElementUI from 'element-ui'
//导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css'
//配置Vue插件 将El安装到Vue上
Vue.use(ElementUI);

4. 复制Element 按钮样式 到app.vue文件的 template下

<template>
 <div id="app">
  <!-- 测试elementUI -->
  <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 id="nav">
   <router-link to="/">Home</router-link>|
   <router-link to="/about">About</router-link>
  </div>
  <router-view />
 </div>
</template>

2.2.2 Vue-CLI工程改造

2.2.3 安装axios

1. npm安装：使用npm下载axios包

npm i axios

2. 在main.js文件中导入axios 相关资源

/引入axios
import axios from 'axios'
//Vue对象使用axios
Vue.prototype.axios = axios;

2.3 用户登录界面制作

2.3.1 Dialog对话框组件

2.3.2 创建login.vue 组件

2.3.3 配置路由

import Vue from "vue";
import VueRouter from "vue-router";
import Login from "@/components/Login.vue"
Vue.use(VueRouter);
const routes = [
 //访问 /,也跳转到login
{
  path:'/',
  redirect:'login' //重定向都login
},
 //登录
{
  path:'/login',
  name:'login',
  component:Login
}
];
const router = new VueRouter({
 routes,
});
export default router;

2.3.4 修改App.vue

<template>
 <div id="app">
  <!-- router-view 的作用是根据访问的路径,渲染路径匹配到的视图组件 -->
  <router-view></router-view>
 </div>
</template>
<style>
</style>

2.3.5 编写登录功能

1. 去掉关闭按钮, 添加一个属性 :show-close=“false”

<el-dialog title="登录" :show-close="false" :visible.sync="dialogFormVisible">

2. 修改登陆触发事件

<el-button type="primary" @click="login">登录</el-button>

3…双向数据绑定

• data 中定义数据

data() {
  return {
   formLabelWidth: "120px", //宽度
   dialogFormVisible: true, //是否关闭对话框
   user: { username: "", password: "" }, //登录数据
 };
},

• 使用 v-model, 将视图与模型进行绑定

<el-form>
   <el-form-item label="用户名称" :label-width="formLabelWidth">
    <el-input v-model="user.username" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item label="用户密码" :label-width="formLabelWidth">
    <el-input v-model="user.password" autocomplete="off"></el-input>
   </el-form-item>
  </el-form>

4. 编写login方法

methods: {
  login() {
   //定义常量保存 url
   const url = "http";
   //发送请求
   this.axios
   .get(url, {
     //携带参数
     params: {
      username: this.user.username,
      password: this.user.password,
    },
   })
   .then((res) => {
     console.log();
     //成功就将对话框关闭
     this.dialogFormVisible = false;
   })
   .catch((error) => {
     //出现错误使用ElementUI提供的消息提示
     this.$message.error("对不起! 登录错误!");
   });
 },
},

2.3.6 Postman搭建mock server

2.3.7 登录成功后跳转

• 在js中设置跳转，常用的一种方法是 this.$router.push

/跳转页面,前端跳转页面必须使用路由,使用$router对象中的push方法
     this.$router.push('/index');

2.4 首页布局页面制作

2.4.1 创建 index.vue

<template>
  <div>
   <el-button type="danger">布局页面</el-button>
  </div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>

2.4.2 配置路由

router目录下 的index.js 路由文件

/导入布局组件
import Index from "@/components/Index.vue"
//布局路由
{
  path:'/index',
  name:'index',
  component: Index
}
];

2.4.3 布局容器

Container 布局容器 ,是用于布局的容器组件，方便快速搭建页面的基本结构：

1. 在官方文档中找到布局的容器代码, 复制到 Index.vue
2. 拷贝布局容器中的导航菜单代码, 进行修改

2.5 课程列表组件制作

2.5.1 编写 Course.vue

2.5.2 配置路由

1.在index.js路由文件中, 为布局路由添加children 属性表示 子路由

//引入课程组件
 import Course from "@/components/Course.vue"
 //布局路由
{
  path: "/index",
  name: "index",
  component: Index,
  //添加子路由,使用 children属性 来表示子路由
  children:[
   //课程信息子路由
  {
    path:"/course",
    name:"course",
    component:Course
  }
 ]
},

2. 修改 Index.vue组件中的导航菜单属性
   router 表示是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
3. 为index属性指定 路由
4. 设置路由的出口,将课程信息展示再 main

2.6 Table表格组件

2.6.1 添加表格组件

复制表格组件相关的代码到 Course.vue中

2.6.2 表格组件说明

//视图部分 进行页面展示
<template>
 //el-table组件 绑定了tableData数据
 <el-table :data="tableData" style="width: 100%">
 //el-table-column 表示表格的每列,prop属性与模型数据中的key对应 ,label 列名
  <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>
</template>
<script>
//export default 相当于提供一个接口给外界，让其他文件通过 import 来引入使用。
export default {
 //data() 函数
 data() {
  return {
   //数据部分
   tableData: [
   {
     date: "2016-05-02",
     name: "王小虎",
     address: "上海市普陀区金沙江路 1518 弄"
   }
 };
}
};
</script>

2.7 课程内容展示

2.7.1 修改Course.vue

1.编写 template, 复制ElementUI的示例代码,进行改动

2.7.1 修改Course.vue

1.编写 template, 复制ElementUI的示例代码,进行改动

• 已被CORS策略阻止：请求的资源上没有’ Access-Control-Allow-Origin’标头（跨域请求失败）
  

Access to XMLHttpRequest at 'http://localhost:8080/lagou_edu_home/course?
methodName=findCourseList' from origin 'http://localhost:8088' has been blocked
by CORS policy: No 'Access-Control-Allow-Origin' header is present on the
requested resource.

2.7.2.2 什么是跨域

跨域是指通过JS在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，只要协议、域名、端口有任何一个不同，都被当作是不同的域,浏览器就不允许跨域请求。

• 跨域的几种常见情况
  

2.7.2.3 解决跨域问题

跨域的允许主要由服务器端控制。服务器端通过在响应的 header 中设置 Access-Control-Allow-Origin 及相关一系列参数，提供跨域访问的允许策略

• 设置响应头中的参数来允许跨域域请求:
  • Access-Control-Allow-Credentials
  • Access-Control-Allow-Origin 标识允许跨域的请求有哪些

1. 在POM文件中引入依赖

<!-- 解决跨域问题所需依赖 -->
<dependency>
  <groupId>com.thetransactioncompany</groupId>
  <artifactId>cors-filter</artifactId>
  <version>2.5</version>
</dependency>

2. 在web.xml中 配置跨域 filter

<!--配置跨域过滤器-->
  <filter>
    <filter-name>corsFilter</filter-name>
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>corsFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

2.8 条件查询

2.8.1 ElementUI输入框组件

Input 输入框通过鼠标或键盘输入字符

2.8.2 Layout 布局

2.8.3 完成根据课程名查询

1. 双向数据绑定

• Model 模型

//数据部分
 data() {
  //定义查询条件
  return {
   loading: false, //是否弹出加载提示
   courseList: [], //定义集合,保存从接口获取的参数
   filter: { course_name: "" } //查询条件
 };
},

• View 视图

<el-input v-model="filter.course_name" clearable placeholder="课程名称">
  <i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>

2. 设置点击事件

<el-button type="primary" @click="search">查询</el-button>

3. methods中添加方法

search() {
   //开启加载提示
   this.loading = true;
   //发送请求
   return this.axios
   .get("http://localhost:8080/lagou_edu_home/course", {
     //携带参数
     params: {
      methodName: "findByCourseNameAndStatus",
      course_name: this.filter.course_name
    }
   })
   .then(res => {
     console.log(res);
     this.courseList = res.data;
     //关闭加载
     this.loading = false;
   })
   .catch(error => {
     this.$message.error("获取数据失败!");
   });
 }