后端服务准备:
以tomcat 为后端服务容器:
我们后端有2层服务,服务层、接口层,后端准备:
我们后端服务项目部署好了后,测试一把:
出现这个说明后端ws服务都是好的。
组件接口层(spring boot项目):
查看一下服务配置的端口:(重点看如下三个要素:服务端口 及及后端服务调用地址、数据库访问地址配置)
启动项目后,测试一把:
前端准备:
1、下项目
2、vscode 打开项目
3、npm i --修改package.json 文件的内容
4、 npm run start //npm run dev
(包的依赖)
package.json 记录包的依赖,npm i 会更新这个文件
服务地址配置在:config目录下的index.js当中。
为解决跨域问题,用了nginx-1.14.2
前端需要访问接口层,为解决跨域问题,用了nginx-1.14.2
其配置项如下:
server {
listen 8899;
location / {
proxy_pass http://127.0.0.1:9527;
}
location /webapi { #添加访问目录为/login的代理配置
# proxy_pass http://lx.lixinn.xyz:17088/;
proxy_pass http://127.0.0.1:81/;
}
location /resources/ { #静态资源
root /work;
rewrite ^/resource/(.*)$ \$1 break;
}
location /ReportService { #报表
proxy_pass http://lx.lixinn.xyz:17068/;
}
location /webapi/olap { #分析
proxy_pass http://127.0.0.1:8881/;
}
}
npm run build 打包命令 生成dist下的内容
生产环境部署 我们用ngnix作为web服务
从后端到前端依次启动,录入用户名 8043/111111 ,启动项目测试通过。
ajax请求通过request.js 封装,节省 代码?
request.js 调用方式:
import request from '@/utils/request'
export function codesByKey(key) {
// http://10.2.1.123/sys/sysDatadictionary/codesByKey?key=D112
return request({
url: `/sys/sysDatadictionary/codesByKey?key=${key}`,
method: 'get'
})
}
main.js 作用:程序朱入口 全局性的引用都在这
element-ui引用:
use后,各个页面直接使用。
如何引入echart
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
具体看官方文档
ps:
import、export es6导入、导出方式,我们开发自己写的组件,一般都用这个。
require、export 是node方式;
配置文件中,require用的多,(项目代码之外配置文件中?)
App.vue是主页面。
弹出层组件?如何传递参数
如何调试前端代码?
常用工具?
常用群、网站?
ps:
SCSS: css的样式文件
eslint | 语法规则和代码风格的检查工具 |
规范:
Iconfont:
下载: zip
解压zip,
添加到项目中
项目中如何引用,有三种方式:我们用的事font class方式。
我们是在index.scss中引入,其他页面都可以直接使用
主入口文件中,我们引入这个index,scss,所以所有页面都可以使用
lodop:
安装: copy
为了保持提示信息和vue风格一致,我们引入了vue的messagebox,
导出:为vue使用,导出这个函数
组件:
插槽:
工具条的实现:
1、样式
2、判断是否能点击(store)
1、置灰
2、通过事件判断的
是否能用按钮,由服务端传递过来,放到this.$route.meta.butns 当中
(computed 属性)
(hasbutton 方法)
工具条中的对账事件,
具体这个方式其实就是fire一个事情:(automatic: fnToolBar.automatic),
automatic() {
Bus.$emit('automatic')
},
这里通过bus 传递事件 或者监听事件
bus 代码很简单:
其实 Bus就是个vue 对象,这里,主要是解决跨父子间多对多的情况。
Bus的使用:
用了代理 报表打不开,报表地址都是127.0.0.1: 原理还没搞懂
解决办法:
nginx加一笔:
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
ps:nginx中proxy_set_header 的作用_kissbike148的博客-CSDN博客_proxy_set_header作用