easyui tree复选框是否打钩状态_十次方专属社交平台前端系统开发 路由与状态管理...

学习目标：

理解路由在单页面工程中的作用

掌握可搜索下拉框、复合型输入框等ElementUI的使用，完成招聘管理功能 完成文章管理功能

理解Vuex状态管理在工程中的作用

1路由vue-router

1.1什么是vue-router

vue-router就是vue官方提供的一个路由框架。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

1.2快速入门

1.2.1初始化工程

# 全局安装 vue‐clinpm install ‐g vue‐cli# 创建一个基于 webpack 模板的新项目vue init webpack vue‐router‐demo # 安装依赖，走你cd vue‐router‐demo npm run dev

1.2.2路由定义

src/App.vue是我们的主界面，其中的标签用于显示各组件视图内容src/router/index.js是定义路由的脚本 path是路径， name是名称 ，component是跳转的组件 。

(1)我们现在定义两个页面组件，存放在src/components下

list.vue

这是一个列表

about.vue

关于我们

(2)定义路由

修改src/router/index.js

import Vue from 'vue'

import Router from 'vue‐router'

import HelloWorld from '@/components/HelloWorld' import list from '@/components/list'

import about from '@/components/about'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

name: 'HelloWorld', component: HelloWorld

},

{

path: '/list',

name: 'List', component: list

},

{

path: '/about', name: 'About', component: about

}

]

})

(3)放置跳转链接

修改src/app.vue ,添加链接

首页列表关于

通过router-link标签实现路由的跳转

router-link标签属性如下：

测试运行看是否可以跳转页面

1.3深入了解

1.3.1动态路由

我们经常会遇到这样的需求，有一个新闻列表，点击某一条进入新闻详细页，我们通常 是传递新闻的ID给详细页，详细页根据ID进行处理。这时我们就会用到动态路由

一个『路径参数』使用冒号:标记。当匹配到一个路由时，参数值会被设置到this.$route.params

看代码实现：

在src/components下创建item.vue

详细页 {{ $route.params.id }}

修改src/router/index.js，引入item组件

import item from '@/components/item'

添加路由设置

{path: '/item/:id',name: 'Item', component: item}

修改src/components/list.vue, 增加链接

这是一个列表新闻1新闻2新闻3

1.3.2嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

我们来看代码的实现

(1)在src/components下创建address.vue

地址：金燕龙

创建linkman.vue

联系人：小二黑

(2)修改src/router/index.js

引入linkman和address

import linkman from '@/components/linkman' import address from '@/components/address'

配置嵌套路由:

{path: '/about',name: 'About', component: about, children: [{path: 'linkman', component: linkman},{path: 'address', component: address}]}

(3)修改src/components/about.vue

1.4十次方的路由代码

我们现在通过看提供的代码来了解

(1)src/router/index.js

import Vue from 'vue'import Router from 'vue‐router' Vue.use(Router)/* Layout */import Layout from '../views/layout/Layout'export const constantRouterMap = [{ path: '/login', component: () => import('@/views/login/index'), hidden: true },{ path: '/404', component: () => import('@/views/404'), hidden: true },{path: '/', component: Layout,redirect: '/dashboard', name: 'Dashboard', hidden: true,children: [{path: 'dashboard',component: () => import('@/views/dashboard/index')}]},{path: '/example', component: Layout, redirect: '/example/table', name: 'Example',meta: { title: 'Example', icon: 'example' }, children: [{path: 'table',name: 'Table',component: () => import('@/views/table/index'), meta: { title: 'Table', icon: 'table' }},{path: 'tree',name: 'Tree',component: () => import('@/views/tree/index'),meta: { title: 'Tree', icon: 'tree' }}]},{path: '/form', component: Layout, children: [{path: 'index',name: 'Form',component: () => import('@/views/form/index'), meta: { title: 'Form', icon: 'form' }}]},{ path: '*', redirect: '/404', hidden: true }]export default new Router({// mode: 'history', //后端支持可开scrollBehavior: () => ({ y: 0 }), routes: constantRouterMap})

(2)src/main.js

.....import router from './router'.....new Vue({ el: '#app', router,template: '', components: { App }})

2招聘管理

2.1准备工作

2.1.1代码生成

(1)使用《黑马程序员代码生成器》，连接数据库tensquare_recruit

(2)将api 与vue页面拷贝到当前工程

2.1.2路由设置

{path: '/recruit', component: Layout, name: 'recruit',meta: { title: '招聘管理', icon: 'example' },children: [{ path: 'enterprise', name: 'enterprise', component: () => import('@/views/table/enterprise'), meta: { title: '企业管理', icon: 'table' }},{ path: 'recruit', name: 'recruit', component: () => import('@/views/table/recruit'), meta: { title: '招聘管理', icon: 'table'}}]},

2.1.3easyMock接口导入

将swaggerAPI文档导入到easyMock中。

2.2企业管理

2.2.1企业简介(文本域)

修改src/views/table/enterprise.vue

2.2.2是否热门(开关)

修改src/views/table/enterprise.vue编辑窗口中是否热门部分

2.3.3 网址输入(复合型输入框)

http://

2.2.4 上传Logo

参见elementUI官方文档 http://element-cn.eleme.io/#/zh-CN/component/upload

(用户头像上传)实现Logo上传

(1)页面添加上传组件

action用于定义提交的服务器地址

show-file-list 是否显示已上传文件列表

before-upload在上传之前被调用，用于判断图片类型和大小

on-success在上传成功之后被调用，用于获取服务器上的文件名

(2)添加样式：

(3)代码：

data添加属性

data() {return {......imageUrl: ''}}

methods增加方法

handleAvatarSuccess(res, file) {this.imageUrl = URL.createObjectURL(file.raw); this.pojo.logo= this.imageUrl},beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!');}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');}return isJPG && isLt2M;}

2.3招聘管理

2.3.1任职方式(单选按钮)

修改src/views/table/recruit.vue

全职兼职

2.3.2选择企业(可搜索下拉选择框)

(1)修改src/views/table/recruit.vue 增加变量–企业列表

enterpriseList: []

(2)修改created()

created() {this.fetchData() enterprise.getList().then(response => { // 企业列表if (response.flag === true) { this.enterpriseList = response.data}})},

(3)修改弹出窗口部分，将文本框替换为下拉框

2.3.3删除创建日期

创建日期是在后端自动生成的，所以要在弹出窗口中删除控件

2.3.4状态(开关)

修改src/views/table/recruit.vue

3文章管理

3.1准备工作

3.1.1代码生成

(1)使用《黑马程序员代码生成器》，连接数据库tensquare_article

(2)将api 与vue页面拷贝到当前工程

3.1.2路由设置

{path: '/article', component: Layout, name: 'article',meta: { title: '文章管理', icon: 'example' },children: [{ path: 'channel', name: 'channel', component: () =>import('@/views/table/channel'), meta: { title: '频道管理', icon: 'table'}},{ path: 'column', name: 'column', component: () => import('@/views/table/column'), meta: { title: '专栏审核', icon: 'table'}},{ path: 'article', name: 'article', component: () => import('@/views/table/article'), meta: { title: '文章审核', icon: 'table'}}]}

3.1.3easyMock接口导入

将swaggerAPI文档导入到easyMock中。

3.2频道管理

修改频道状态为开关，代码略

3.3专栏审核

3.3.1修改easyMock数据

URL: article/column/search/{page}/{size}

{"code": 20000,"flag": true, "message": "@string