视频下载
前端工程介绍
技术栈
首先介绍一下前端工程的骨架模板 它是基于nuxt创建的工程，用到的主要技术栈有vue，element-ui，axios和nodeJS。
为什么选择Nuxt框架，其实是因为中台项目初始方案是有服务端渲染需求的，而它是vue官方指定的SSR解决方案，并且它也有自身的一些优点。nuxt特点
在实际开发中nuxt和vue很像，它相当于是在vue的基础上扩展了一些额外的配置，但是也有本质的区别，因为nuxt既可以运行在服务端也可以运行在客户端，但是vue始终是运行在客户端的。这个时候在进行一些操作的时候就需要先判断运行的环境，比如对一些DOM操作，服务端没没有DOM概念的。
- 自动代码分层
- 静态文件服务
- 强大的路由功能（内置vue-rouer，自动依据pages下的目录结构生成对应路由配置 可以在.nuxt/router.js中查看生成的路由）
- 服务端渲染（首屏速度加载更快，SEO友好）
- 支持常见的各种预处理器SASS,LESS
- 无需额外配置即可使用es6/7的语法编译（内置babel,会自动为我们处理js语法的兼容问题）
- 自动化的为我们模块化处理vuex， 并自动注入客户端、服务端中。
在学习nuxt框架的时候，我觉得首先应该理解两个点
1.第一个是nuxt的上下文对象context
context是Nuxt独有的对象，比较常用在"asyncData"、"plugins"、"middleware"、 "store/nuxtServerInit方法"中。因为不清楚context对象的话，在做服务端数据请求的时候很多参数是拿不到的。// context 参数
function (context) {
// Universal keys
const {
app, // vue根实例
store, // vuex.store实例
route, // vue.rote 路由实例
params, // route.params参数
query, // route.query参数
env, // 环境变量
isDev, // 是否开发模式
isHMR, // 是否热更新状态
redirect, // 路由重定向的方法
error, // 错误方法 用于展示错误页
$config // config 配置
} = context
// Server-side
if (process.server) {
const { req, res, beforeNuxtRender } = context
req: http.Request 对象
res: http.Response对象
}
// Client-side
if (process.client) {
const { from, nuxtState } = context
}
}2.第二个是 asyncData方法，我们应该知道它的一些基本特性。
首先，它是Nuxt独有的方法，在服务器收到客户端请求后，在组件被初始化前调用，所以使用的时候要注意它是没有this对象的。
在asyncData里获取的数据会和组件return()data返回的数据一起返回给当前页面使用。
asyncData方法的第一个参数是 context对象。
因为asyncData方法是运行在服务端的，所以一般的调试信息比如console.log在浏览器的控制台是看不到的，只能在服务端的命令行查看。
asyncData的三种使用方式
// 第一种 返回 Promise export default { asyncData ({ params }) { return axios.get(`https://my-api/posts/${params.id}`) .then((res) => { return { title: res.data.title } }) } } // 第二种 使用 async，await export default { async asyncData ({ params }) { const { data } = await axios.get(`https://my-api/posts/${params.id}`) return { title: data.title } } } // 第三种 回调方法 export default { asyncData ({ params }, callback) { axios.get(`https://my-api/posts/${params.id}`) .then((res) => { callback(null, { title: res.data.title }) }) } }另外，我们可能会遇到在一个页面需要加载多个接口数据的情况，这个时候使用await异步去依次执行请求，会造成等待时间过久。这个时候可以使用Promise.all()去并发请求。
目录结构
点击查看前端规范
点击查看
1 登录开发者后台创建一个套件
登录地址: http://pai.flyrise.cn/developer
进入开发中心 > 我的套件 > 添加套件 完成套件创建。套件标识需唯一
套件标识：dev.demo.front
套件类型选择园区
2 使用pai工具创建前端工程并绑定刚才的套件
操作步骤：
# 1.创建前端工程
pai create front -n pai-devdemofront-ui -s dev.demo.front
# 2.初始化工程
pai init && pai add . && pai commit -m '[ADD]新建初始化工程' && pai push
# 3.本地运行前端工程
npm install && npm run dev
# 4.访问测试页面/table
注：接口404是可以按以下步骤开启本地mock测试接口
修改 server/index.js 第5行 OCK_SERVER_ENABLE = true
修改 nuxt.config.js 第29行 enable: true 打开33行代理注释 重新运行工程 npm run dev
再次访问页面/table，尝试执行增删改查等基本操作。3 使用pai工具创建后端工程并绑定刚才的套件
操作步骤
# 1.创建后端工程
pai create service -n pai-devdemoservice -s dev.demo.front
# 2.初始化工程
pai init && pai add . && pai commit -m '[ADD]新建初始化工程' && pai push
# 3.登录开发者后台使用表管理工具在后端工程创建表user,新增以下字段
|字段名| 字段类型 |注释 |
| name | char | 姓名 |
| sex | char | 性别 |
| age | init | 年龄 |
| sn | varchar | 工号 |
# 4.基于创建的云数据库表自动生成接口代码
cd pai-xxxx后端 工程 && pai code -t xxxx表名
# 5.部署后端工程到中台服务
pai add . && pai commit -m '[ADD]新增XX服务' && pai push && pai deploy service -n pai-xxxx访问后台接口文档查看 http://pai.flyrise.cn/flowtest-api/doc.html#/home
4 使用前端工程对接部署的后端服务接口
在/api下新建接口文件如
testapi.js，并复制/api/table.js全部内容，仅替换对应接口的url地址为真实服务路径地址(不包含域名)在/pages下新建页面文件
testpage.vue，复制/pages/table.vue全部内容 修改第80行 from ‘~/api/testapi’ 并调整页面的部分字段对应创建的数据表。
（表格列表新增ID，工号列）访问
/testpage页面查看对接情况 尝试进行增删改查等基本操作
5 中台能力/组件的简单应用，Pai-ui组件
注：(流水号，数据字典为例)本次操作全部在沙箱环境下执行，正常开发需要走套件的发布审核流程。
1.登录
开发者后台在套件开发页面依次点击数据字典>添加字典完成数据字典添加。(这里添加的字典为绑定套件的扩展字典，系统提供的数据字典开发者可以直接使用。）2.登录
开发者后台在套件开发页面依次点击流水号配置>添加模板完成流水号添加。字典选项和流水号规则我们在控制台添加，这里不做修改。3.返回套件列表页面 点击套件卡片的沙箱按钮，一键安装沙箱 然后使用对应的地址，账号，密码登录控制台，依次配置数据字典的选项值及流水号规则。
参考：数据字典性别（男-M，女-F，其他-T）流水号工号（规则自定义文本前缀+入职日期+自动4位流水位 起始值1 FLY202105080001）4.在开发中实际应用刚才配置的数据字典和流水号。
分别替换前端工程/pages/testpage页面中的流水号为刚才配置的工号，性别字段为配置的数据字典-性别。(组件使用方法可以参照pai-ui文档，或者在表单建模的时候生成相应组件代码)5.运行工程查看，没有问题的话 部署前端工程到中台。
pai add . && pai commit -m '[ADD]新增XX功能' && pai push && pai deploy front -n pai-xxxxx-ui
6 前端工程/套件在工作台的实际应用
1.开发的web功能主要以
套件微应用的形式上架应用市场，通过管理员在控制台安装后在工作台使用。2.登录开发者后台 进入应用中心 找到 创建的套件，点击后 依次执行创建版本，添加微应用(所属终端web，访问入口/xxx前端工程名/testpage）
3.返回
开发中心>我的套件依次点击沙箱>一键更新可以到沙箱控制台查看套件刚才添加的微应用并设置可见范围。4.登录
工作台使用 依次点击应用，XXX套件，找到刚才的微应用点击打开。
