微服务项目开发学成在线_day02 CMS前端开发

1 Vue.js与Webpack研究

开发版的浏览器:https://www.google.cn/intl/zh-CN/chrome/dev/

前端的开发框架:微服务项目开发学成在线_Vue.js与Webpack

使用了webpack之后就不能采用传统js的调试方法在chrome中打断点。
1、在webpack.config.js中配置:

devtool: 'eval‐source‐map',

微服务项目开发学成在线_day02 CMS前端开发


16-CMS前端工程创建-导入系统管理前端工程

 2.1 导入系统管理前端工程
CMS系统使用Vue-cli脚手架创建, Vue-cli是Vue官方提供的快速构建单页应用的脚手架,github地址:
https://github.com/vuejs/vue-cli(有兴趣的同学可以参考官方指导使用vue-cli创建前端工程),本项目对Vue-cli创建的工程进行二次封装。

用WebStorm打开目录。

微服务项目开发学成在线_day02 CMS前端开发

2.2.2 package.json

开发使用:npm run dev
打包使用:npm run build

2.2.3 webpack.base.conf.js

webpack.base.conf.js就是webpack的webpack.config.js配置文件,在此文件中配置了入口文件及各种Loader。

2.2.4 main.js
main.js是工程的入口文件,在此文件中加载了很多第三方组件,如:Element-UI、Base64、VueRouter等。
2.2.5 src目录
src目录下存放页面及js代码。

assets:存放一些静态文件,如图片。
base:存放基础组件
base/api:基础api接口
base/component:基础组件,被各各模块都使用的组件
base/router:总的路由配置,加载各模块的路由配置文件。
common:工具类
component:组件目录,本项目不用。
mock:存放前端单元测试方法。
module:存放各业务模块的页面和api方法。
下级目录以模块名命名,下边以cms举例:
cms/api:cms模块的api接口
cms/component:cms模块的组件
cms/page: cms模块的页面

cms/router:cms模块的路由配置
statics:存放第三方组件的静态资源
vuex:存放vuex文件,本项目不使用
static:与src的平级目录,此目录存放静态资源
它与assets的区别在于,static目录中的文件不被webpack打包处理,会原样拷贝到dist目录下。

17-CMS前端工程创建-单页面应用介绍

单页面应用的优缺点:
优点:
1、用户操作体验好,用户不用刷新页面,整个交互过程都是通过Ajax来操作。
2、适合前后端分离开发,服务端提供http接口,前端请求http接口获取数据。

缺点:
1、SEO不友好
SEO(Search Engine Optimization)为搜索引擎优化。

项目的门户、公司产品和服务介绍不采用单页面应用架构去开发,对于需要用户登录的管理系统采用单页面开发。
18-CMS前端页面查询开发-页面原型-创建页面和定义路由

3 CMS前端页面查询开发
微服务项目开发学成在线_day02 CMS前端开发

19-CMS前端页面查询开发-页面原型-Table组件测试

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

Vue 后台管理项目3-饿了吗UI导入

20-CMS前端页面查询开发-页面原型-页面内容完善

页面开发的接口用springboot集成的swagger导出获得。

微服务项目开发学成在线_day02 CMS前端开发

前端页面的分页组件的使用,需要参考UI库提供的手册。

21-CMS前端页面查询开发-Api调用

22-CMS前端页面查询开发-Api调用-跨域解决

3.3 跨域问题解决

测试 上边的代理 ,结果 报错如下 :
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin
'http://localhost:11000' is therefore not allowed access.
原因:浏览器的同源策略不允许跨域访问,所谓同源策略是指协议、域名、端口相同。
解决:采用proxyTable解决。

vue-cli提供的解决vue开发环境下跨域问题的方法,proxyTable的底层使用了http-proxymiddleware(https://github.com/chimurai/http-proxy-middleware),它是http代理中间件,它依赖node.js,
基本原理是用服务端代理解决浏览器跨域:
微服务项目开发学成在线_day02 CMS前端开发

具体的配置如下:
1)修改api方法中url的定义
请求前加/api前缀

//public是对axios的工具类封装,定义了http请求方法
import http from './../../../base/api/public'
let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre;
export const page_list = (page,size,params) => {
return http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'/'+size)
}

2)在config/index.js下配置proxyTable

以/api/cms开头的请求,代理请求http://localhost:31001

'/api/cms': {
target: 'http://localhost:31001',
pathRewrite: {
'^/api': ''//实际请求去掉/api
}

23-CMS前端页面查询开发-分页查询实现

1、定义分页视图
使用v-on监听更改分页事件

<el‐pagination
layout="prev, pager, next"
:page‐size="this.params.size"
v‐on:current‐change="changePage"
:total="total" :current‐page="this.params.page" style="float:right;">
</el‐pagination>

2、定义数据模型对象

data() {
return {
list:[],
total:50,
params:{
page:1,//页码
size:2//每页显示个数
}
}

3、定义分页方法,接收页码参数

//分页查询,接收page页码
changePage(page){
this.params.page = page;
this.query()
}

24-CMS前端页面查询开发-使用钩子方法实现立即查询

3.5 进入页面立即查询

目前实现的功能是进入页面点击查询按钮向服务端表求查询,实际的需求是进入页面立即查询。
如何实现?
这要用到vue的钩子函数,每个 Vue 实例在被创建时都要经过一系列的初始化过程,生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

通常使用最多的是created和mounted两个钩子:
created:vue实例已创建但是DOM元素还没有渲染生成。
mounted:DOM元素渲染生成完成后调用。

本例子在两个方法的任意一个都满足需求:
添加如下代码:

mounted() {
//默认查询页面
this.query()
}

25-前后端请求响应流程小结

微服务项目开发学成在线_day02 CMS前端开发

上一篇:微服务项目开发学成在线_day03 CMS页面管理开发


下一篇:阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程