前端还原界面的那些事！
UI设计师与前端配合篇
开发语言：java
数据库：oracle mysql
oracle中用sql语句查询，没有sql server中的可视化操作。
m3p有一部分是oracle，大部分是mysql
一体化之前用的是Oracle，现在用的mysql，国产软件一般不用Oracle
现在有很多开发框架都封装好了，可以很少写sql
下面来说说卡片区的适配，客户电脑显示屏宽1920px和1280px。1920px屏幕宽度下9个190px的卡片，1280px屏幕宽度时3个140px，6个110px，140*9=1260，卡片间距20*3+20*2=100，15*4=60，1260+160=1420px。屏幕宽度大于1440px，9个卡片等宽，1280px至140px区间，3个卡片140px，其余6个卡片等分宽度。1280px以下屏幕宽度，横向产生滑动条。
媒体查询只能做固定效果的适配，这种3个是固定值，6个平均分的设置要用JavaScript写逻辑。
如同所示1280px至1440px区间，6个区块中最小两位数。
用scss中的设置3个块固定宽度，其余块flex=1，scss与一般css的不同在于，不用取很多名称，可以包在css里面写子级样式。
scss需要下载APM包，用<style scoped rel="stylesheet/scss" lang="scss">引用
svg的使用需要相应的包。
less与scss类似。
百度搜索：less前端
https://blog.csdn.net/qq_41442781/article/details/90032717
安装git小乌龟上传文件。
修改文件夹下右键，点击向下图标，先拉取，再上传，上传时候
勾选修改过的文件，注明修改原因，
底部下拉选择中先选Commit，然后出现Push选Push
上传成功，检查线上文件大小已经改变，文件更新成功。
文件排版缩进检查，word生成新目录。
===================================================================
安装动态界面预览服务器node
（1）node-v10.14.2-x64.msi（node安装文件）将.vue界面在node本地服务器中运行，本地可预览动态界面。
在win10底部搜索栏中输入cmd调出“命令提示符”，
也可以在windows任意文件夹目录下输入cmd调出“命令提示符”
输入node -v如果没安装node，则如下图所示，
若安装了node则显示安装的版本，如：v10.14.2
（2）安装webstorm编辑前端代码，安装时需要将很长一段破解码输入其中一步操作中。
启动webstorm，右下角的进度条进行代码加载。
右上角绿色三角图标是启动操作，点击后先检查代码，
有两个.vue后缀的文件被篡改，修改成.vue后缀名后不报错，动态界面在本地网址中运行。
（3）百度输入node，选择“Node.js 中文网”http://nodejs.cn/，
下载windows安装包node-v14.15.3-x64.msi，因为文件小，在线下载新版本方便一般本地不存安装包。
（4）开发人员一般会在CSDN上写技术博客，有代码模板，代码复制进模板和编辑器中显示一致。
（5）node默认路径安装在c盘，不要修改默认路径，否则可能会报错。
node和IIS类似都是动态网站的本地服务器。
===================================================================
安装前端环境webstorm，网页中审查元素辅助修改样式
（1）webstorm安装过程中有一步需要在输入框中复制一段破解码。
（2）webstorm中左侧cdp-web项目目录中，src-->styles-->global-->common-table.scss中放着表格样式。
（3）src-->views下的.vue文件是界面文件。
（4）右侧文件标签为PrimaryNav\index.vue（主导航界面）鼠标移上显示完整路径
[cdp-web]E:\myObject\cdp-web\src\views\layout\components\PrimaryNav\index.vue
（5）logo及系统名称后
<el-menu
:default-active="defaultPath"
>
</el-menu>
查看“Element”-->组件-->NavMenu导航菜单-->Menu Attribute
下面有default-active（当前激活菜单的index）
（6）导航高度60px设置
[cdp-web]E:\myObject\cdp-web\src\views\layout\components\AttachNav\index.vue
<style ......>
.navbar-self{
@include normalScrean{ height:60px; }
}
</style>
（7）关闭Webstorm右侧主窗口打开的页面，再次打开Webstorm时仍存在。
（8）E:\myObject\cdp-web为cdp-web项目，在同级目录下新建文件夹可以新建项目。
（9）行内样式优先级最高，其次是内联样式，再是外联.css样式。
===================================================================
新建项目的运行
（1）E:\myObject\下新建new-web的文件夹，将更新的项目存放在此目录下
（2）webstorm的打开new-web文件，左侧文件中选中E:\myObject\new-web\cdp-web
（3）点击红色正方形结束现在运行的项目，点击绿色三角启动当前项目
（4）完全启动后跳转到网页localhost:8989/，在地址栏后补充完整
localhost:8989/equipmentBoard
localhost:8989/homePageRepresentative
就可以查看页面了。
（5）页面长时间不查看显示“用户token过期”
需要在webstorm中点击红色正方块结束后重新点击绿色三角重启服务，
此时自动登录首页localhost:8989/homePageRepresentative。
（6）webstorm默认在底部代码控制行中输入run代码进行运行，经过配置后才可以点击绿色三角进行运行。
===================================================================
Microsoft VS Code中搭建Vue脚手架
（1）免安装绿色软件，将运行程序图标直接发送到桌面使用。
（2）Microsoft VS Code汉化
（3）搭建Vue脚手架
https://blog.csdn.net/qq_43923146/article/details/108403243
更多技术总结请看fz造梦者的CSDN博客：
简单的问题面向百度，难的问题面向bilibili（B站）
忙的时候搬砖，有空的时候切磋提高技术（中级，项目经理证PMP）
1、安装nodejs（自带npm）
2、安装npm install -g cnpm --registry=https://registry.npm.taobao.org（cnpm是国内的，比较快）
3、全局安装webpack
cnpm install webpack –g
4、安装vue-cli脚手架构建工具
cnpm install vue-cli –g
二、 使用vue-cli构建项目
1、准备一个文件夹作为你的工作空间（以后的每个项目都在文件夹下）
如：F:\myObject\vueObject\first
F:\myObject\vueObject\first_server（放json-server安装包）
例如：e:\workspace
2、安装vue脚手架
在工作空间的目录下运行 vue init webpack 项目名称
3、安装项目依赖
npm install
4、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource
npm install vue-router vue-resource --save
5、启动项目测试安装是否成功 npm run dev 看到如下画面，说明成功启动，默认端口号是8080
6、运行
在地址栏中输入http://localhost:706/# 看到下图,说明成功了。
vue脚手架构建的项目目录结构
===================================================================
前端VUE框架构建界面
（1）element组件使用，element组件网址：https://element.eleme.cn/#/zh-CN/component/form
element组件网址查看按钮代码，在vue默认界面中写入按钮代码，
默认按钮采用js代码式跳转，主要按钮采用路由声明式跳转。
（2）前端第一步：写静态界面，第二步：写js，jquery，按钮点击事件js代码式js写法如下：
（3）终端运行界面的代码是什么，如何配置实现点击运行，显示效果如下图所示：
（4）引入svg图标：assets目录下新建img文件夹，将svg图标拖入，
vue默认界面引入svg图标，界面底部写样式。
现在程序开发大概介绍后在CSDN上qq登录更新技术博客
===================================================================
echarts图表应用
（1）echarts图表网址：https://echarts.apache.org/examples/zh/index.html#chart-type-bar
===================================================================
json-server的基本使用
https://blog.csdn.net/qq_43923146/article/details/112261251
===================================================================
以上是搭建简易项目，实际项目还要进行封装和拦截
===================================================================
卸载广告弹出框
（1）广告弹出时ctrl+alt+delect调出任务管理器，在任务上右键“打开程序所在位置”，删除进程，
将.exe执行文件删除
（2）有些广告弹出后找不到程序所在位置，点击广告界面的设置按钮进行设置不再显示。
===================================================================
UI设计师工作中重要的一项就是和前端合作还原界面，懂前端做更流畅优秀的产品。
