前端工作入手文档
目录
1 环境安装.........................................................................................2
1.1 软件安装................................................................................2
1.2 浏览器环境搭建.....................................................................2-3
2 前端架构.........................................................................................4
2.1 PC端架构..............................................................................4
2.2 移动端架构............................................................................4
3 开发流程.........................................................................................6
3.1 运行环境................................................................................6-7
3.2 本地运行常见问题..................................................................8-9
3.3 查询具体页面.........................................................................10-11
3.4 提交发布................................................................................12-15
4 路由配置.........................................................................................16
5 项目创建.........................................................................................
1 环境安装
1.1 软件安装
node.js
Visual Studio Code(推荐.也可以使用其他开发工具)
微信开发者工具
HBuilderX
postman
SVN
Chrome浏览器（需指定版本，详情看1.2 浏览器环境搭建）
数据库建模：PowerDesigner 16
UML建模：Visual Paradigm
数据库：MySQL+redis3.0+ clickhouse
clickhouse连接配置手册
DBeaver连接clickhouse（超详细图文教程）-CSDN博客
数据库连接工具：Navicat for MySQL，DBeaver
应用服务器：tomcat 7+(servlet3.0版本)
项目管理工具：maven 3+
版本管理工具：git
ssh工具
1.2 浏览器环境搭建（谷歌浏览器解决跨域问题及本地环境循环跳转登录页问题）
1. 安装指定版本浏览器
如果安装包无反应则把当前谷歌浏览器卸载再进行安装指定版本浏览器（注： 记得导出浏览器保存的书签，账号密码等信息再进行卸载操作）
2. 在本地C盘新建文件夹名称如MyChromeDevUserData
3. 安装好的指定版本谷歌浏览器并创建一个快捷方式浏览器，快捷浏览器 鼠标右键→属性→目标 --disable-web-security--user-data-dir=C:\MyChromeDevUserData 复制蓝色内容 粘贴至目标内容后面（需要带空格与之前的内容分开） 确定保存
4. 打开的浏览器快捷方式如有弹窗点确认（首次打开偶尔会有该情况）， 有下图提示，则配置成功
5. 浏览器搜索输入 chrome://flags 进行搜索，再根据下方图片找到红框 标注选项内容并将其配置内容状态改为 Disabled 即可
6. 现在就应该有两个谷歌浏览器的图标；一个是安装好的指定版本浏览器 一个是指定版本浏览器的快捷方式（配置完成）快捷方式浏览器是用于 项目本地运行，另一个是工作中浏览器正常的功能使用;
2前端架构
2.1 PC端架构（运营，中台，商城）
saas平台前端架构以：
common组件模块（公共依赖；模板主题，埋点统计..等）
子系统（order-manager - 订单管理；goods-manager - 商品管理...等） 每个子 系统都可以作为单独的项目进行本地运行；
应用页面（子系统里具体开发页面，通过动态路由，跳转显示）
2.2 移动端架构
移动端包括 小程序，H5，微商城。由nui-app进行搭建，vue，uview-ui为主要技术栈。在目前的星云2.0架构升级中，移动端进行环境兼容，实现小程序，H5共用一套代码。
3 开发流程
3.1 运行环境（本地）
PC端：
在前端整个PC架构中，每个project（子系统）都可以做为一个单独项 目进行独立 运行。再拉取代码后，通过NPM包管理工具进行项目依赖 的安装。也有通过yarn来管 理依赖（如：site-builder 小程序构造器） 具体使用根据project配置来定
本地运行环境则通过配置域名来访问对应的环境资源：
根目录 config 文件夹 dev.env.js 文件 API_ROOT 常量配置域名地址
移动端：
小程序和H5的环境配置是基于package.json中uni-app选项进行自定义 配置；
根据package.json中的配置，在项目根目录创建对应config,XXX.json 文 件。
如：config.H5.json 里配置的是H5的域名
config.test.json 里配置的是小程序的测试域名
config.star.json 里配置的是小程序的生产域名
（具体的配置语义完全可以自定义）
运行自定义配置即可：
3.2 本地运行常见问题
PC端：
问题1：未找到qj-template模板文件
解决方法：
找到build文件夹中webpack.base.conf.js文件，将对‘#’配置引导路径改为 qj-template/src 重新运行即可
问题2：vue 文件引入地址错误
解决方法：找到根目录的index.html 文件 修改文件引入路径即可
移动端：
问题1：小程序当前域名未配置 request 合法列表中
解决方法： 在开发工具中勾选不校验合法域名选项
3.3 查询具体页面（路径查询）
以图上商品列表页面为例;
路径中pass/后面是当前页面所在的子系统（xxx-manager）；
platDistributeSkuList 就是当前页面的路由name
在浏览器缓存SessionStorage中找到menuList字段；这个就是缓存动 态路由的地方；
在menuList中全局查找当前页面路由：
筛选出对应的路由数据后，menuJspath 就是页面在项目中的文件 路径
3.4 提交发布
PC端：
在代码完成的工作后将代码提交到仓库（配置文件不用提交；如：config， packag.json等）
在线上仓库中创建标签：
Tag name 就是创建标签号：
标签格式是以：当天日期+创建次数
如：2022年3月18日第一次提交：20220318.1；
第二次提交：20220318.2；以此类推
再创好对应标签后，再通过Jenkins进行对应环境的代码更新部署
（部署时标签号的填写前后不能有空格）
移动端：
小程序：代码提交仓库后，通过HBuilder 选择对应环境进行发行上传。 如有多环境配置时，选择自定义发行
H5：H5的发布则是通过jenkins进行部署：
代码提交后，也是通过HBuilder自定义发行；选择H5配置项。这 步是通过Hbuilder进行一个打包操作。
发行成功后，unpackage 文件下面dist文件会有打包好的文件H5
unpackage --> dist --> build --> h5
将打包后的文件提交到仓库-->创建标签--> jenkins发布部 署即可。
4 路由配置
代码提交GIT前，需要把SQL维护到项目wiki下（按日期维护好提交的SQL，发布新环境需要去升级这里的SQL），由技术经理负责
维护模板：
默认生产的URL注册SQL中permission_list_sort=0(鉴权详见鉴权与权限设计(下))，根据业务需求需要手动修改SQL语句，permission_list_sort=0（分配权限）还需要补充up_menu的SQL，permission_list_sort=1（登录），permission_list_sort=2（公共），permission_list_sort=3(管理员)
注意修改当前project的版本号，在父pom文件中
详见2.7.接口权限配置\前端路由配置:包括路由配置、权限分配
配置菜单参见菜单路由配置（速成版）
NPM账号：qjclound 密码：Qjwl20161014@
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
