文章内容输出来源:拉勾教育JAVA就业训练营
在安装vue-cli前,要确认自己的电脑是否安装了nodejs和npm.
安装了node.js才有使用npm ,才能安装vue-cli
https://nodejs.org/en/download/
npm全称Node Package Manager,他是node包管理和分发的工具,使用NPM可以对应用的依赖进行管理,NPM 的功能和服务端项目构建工具maven的依赖管理功能差不多,我们通过npm 可以很方便地下载js库,打包js文件。
npm install -g @vue/cli
/*
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的区域
App.vue 中的模板(HTML代码)
挂载的是这个div
router-view 的作用是 根据访问的路径,渲染路径匹配到的视图组件
// 引入所需文件
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
npm i element-ui -S
//导入组件库
import ElementUI from 'element-ui'
//导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css'
//配置Vue插件 将El安装到Vue上
Vue.use(ElementUI);
"app">
默认按钮
"primary">主要按钮
"success">成功按钮
"info">信息按钮
"warning">警告按钮
"danger">危险按钮
"nav">
"/">Home |
"/about">About
npm i axios
/引入axios
import axios from 'axios'
//Vue对象使用axios
Vue.prototype.axios = axios;
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;
登录
3…双向数据绑定
data() {
return {
formLabelWidth: "120px", //宽度
dialogFormVisible: true, //是否关闭对话框
user: { username: "", password: "" }, //登录数据
};
},
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("对不起! 登录错误!");
});
},
},
/跳转页面,前端跳转页面必须使用路由,使用$router对象中的push方法
this.$router.push('/index');
布局页面
router目录下 的index.js 路由文件
/导入布局组件
import Index from "@/components/Index.vue"
//布局路由
{
path:'/index',
name:'index',
component: Index
}
];
Container 布局容器 ,是用于布局的容器组件,方便快速搭建页面的基本结构:
1.在index.js路由文件中, 为布局路由添加children 属性表示 子路由
//引入课程组件
import Course from "@/components/Course.vue"
//布局路由
{
path: "/index",
name: "index",
component: Index,
//添加子路由,使用 children属性 来表示子路由
children:[
//课程信息子路由
{
path:"/course",
name:"course",
component:Course
}
]
},
复制表格组件相关的代码到 Course.vue中
//视图部分 进行页面展示
<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>
1.编写 template, 复制ElementUI的示例代码,进行改动
1.编写 template, 复制ElementUI的示例代码,进行改动
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.
跨域是指通过JS在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,只要协议、域名、端口有任何一个不同,都被当作是不同的域,浏览器就不允许跨域请求。
跨域的允许主要由服务器端控制。服务器端通过在响应的 header 中设置 Access-Control-Allow-Origin 及相关一系列参数,提供跨域访问的允许策略
com.thetransactioncompany
cors-filter
2.5
<filter>
<filter-name>corsFilterfilter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilterfilter-class>
filter>
<filter-mapping>
<filter-name>corsFilterfilter-name>
<url-pattern>/*url-pattern>
filter-mapping>
Input 输入框通过鼠标或键盘输入字符
//数据部分
data() {
//定义查询条件
return {
loading: false, //是否弹出加载提示
courseList: [], //定义集合,保存从接口获取的参数
filter: { course_name: "" } //查询条件
};
},
查询
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("获取数据失败!");
});
}