1.前端服务器搭建
(1)创建一个static web project
(2) 安装 npm install -g vue-cli
(3) vue init webpack 项目名
(4)cd 项目名
npm run dev 运行服务
完成上面步骤后,就将vue.js项目放入到前端服务器中运行了。如果安装速度慢可以使用淘宝镜像代理:npm config set registry https://registry.npm.taobao.org
2.element安装
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 ,是一种很好的前端开发,可以很好的用来实现前后端分离
(1)安装
npm i element-ui -S
(2)引入elementui 在 main.js
import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
Vue.use(ElementUI) //引用
3.配置main.js(所有配置写在一起的,看的时候注意区分)
import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui'; //引入核心js组件 import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式 import axios from 'axios'//引入axios请求 import UserMock from './userMock.js'//引入假数据源 //配置axios的全局基本路径 axios.defaults.baseURL='' //全局属性配置,在任意组件内可以使用this.$http获取axios对象 Vue.prototype.$http = axios Vue.use(ElementUI) //引用elementui //上面这行代码的意思 是阻止显示生产模式的消息 Vue.config.productionTip = false//默认配置false /* eslint-disable no-new */ new Vue({//挂载index中所有的路由和组件 el: '#app', router, components: { App }, template: '<App/>' })
1.element组件使用 效果: 客户端(浏览器)输入地址-----> 根据路由进入相应的组件中---------->vue界面渲染,展示
步骤1:新建一个vue文件
<template> <div id="app"> <el-button @click="visible = true">Button</el-button> <el-dialog :visible.sync="visible" title="您好"> <p>欢迎您</p> </el-dialog> </div> </template> <script> export default { name: 'elementUi01', data () { return { msg: '欢迎来到vue', visible:false } } } </script>
步骤2:在index.js中配置路由(浏览器访问的路径,以及组件的引入)
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld'//引入界面模板 import Elementui from '@/components/_01elementui' Vue.use(Router) export default new Router({//将路由导出到需要挂载的文件中,main.js routes: [ { path: '/',//访问路径 name: 'HelloWorld', component: HelloWorld//组件名与上面导入的名称一致 }, { path: '/_01elementui', name: '_01elementui', component: Elementui },
上面只是一个简单的引入,其他还有很多组件和样式的使用,如el-button 按钮、el-tree 树形、el-table表格、el-form表单、el-pagination分页、el-container容器、el-layout布局
el-tabs页签 选项卡、el-dialog对话框、el-alert 提示框等,使用的方式一样,只是界面展示内容不同,就不再重复了。
4.mockjs:前端工程师 用来模拟的数据
安装mockjs
(1) npm install mockjs
(2)userMock.js(假数据生成的文件)文件引用 mockjs
let Mock=require('mockjs') ;
(3)在js生成数据 ,拦截axios请求(了解)返回自己生成的假数据,具体代码如下
测试:
let Mock=require('mockjs') //定义一个数组 var dataList = []; //循环16次生成数据,并将数据放入到数组中,得到一个装有假数据的集合dataList for(var i=0;i<16;i++){ dataList.push(Mock.mock({ 'id': '@increment', 'name': '@cname', 'phone': /^1[0-9]{10}$/, 'email': '@email', 'address': '@county(true)', 'createTime': '@date("yyyy-MM-dd")' })); } //分页,index是起始数据,size带表条数index*size,带表结束数据 function pagination(index, size, list){ return list.slice((index-1)*size,index*size); } //拦截axios请求opts,前端传入的参数 para new RegExp('/user/list',拦截的路径 Mock.mock(new RegExp('/user/list'), 'post', (opts) => { //把上面得到的假数据赋值给list集合 var list =dataList; console.log(opts.body) //取出传递过来的参数的当前页 var index = JSON.parse(opts.body).page; //3 //写死的一页条数 var size = 10; //总条数 var total = list.length //调用分页方法,分页 list = pagination(index, size, list) //拦截ajax请求后将假数据的结果返回 return { 'total': total, 'data': list } })
5.使用axios发送请求完成(vue.crud)
安装axios
1.cd 当前项目名
2.npm install axios --save
测试:具体代码如下
<template> <div> <!--工具条--> <el-col :span="24" class="toolbar" style="padding-bottom: 0px;"> <el-form :inline="true"> <el-form-item> <el-input placeholder="关键字"></el-input> </el-form-item> <el-form-item> <el-button type="primary">查询</el-button> </el-form-item> <el-form-item> <el-button type="primary">新增</el-button> </el-form-item> </el-form> </el-col> <!--users就是前端页面展示内容的数据--> <el-table :data="users" style=" 100%" border height="450px" > <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> <el-table-column prop="email" label="邮件"> </el-table-column> <el-table-column prop="phone" label="电话"> </el-table-column> <el-table-column prop="createTime" label="创建时间" width="180"> </el-table-column> <el-table-column fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> <el-button type="text" size="small">编辑</el-button> </template> </el-table-column> </el-table> <el-col :span="24" class="toolbar"> <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;"> </el-pagination> </el-col> </div> </template> <script> export default { data() { return { users: [], total:0, page:1 } }, methods:{ getUsers(){ //这个是对象 {key:value} let para = { page:this.page } //加载数据 //发送ajax 从后台查询出来...没有写后台 --模拟后台数据 mockjs //res就是假数据返回的结果 this.$http.post('/user/list',para).then(res=>{ console.log(res); //自动假数据封装成一个data对象 //将加数据取出后赋值给当前页面中的users,然后就可以展示了 this.users = res.data.data; // this.total = res.data.total; }); },
//监听当前页面的改变 handleCurrentChange(val){ //currentPage console.log(val); //把当前页 赋值给page这个字段 this.page = val; this.getUsers(); } }, mounted(){ //页面加载完之后执行的方法 this.getUsers(); } }; </script>