苍穹外卖（学）

目录

前端day1-07~08（状态管理vuex的介绍和使用方式）

1.state下定义共享数据

2.在mutation中定义函数，修改共享数据，方法里面的代码必须都是同步操作

3.mutation的函数的调用      this.$store.commit('函数名'，'参数')

4.actions 和mutation类似关键在于能够实现异步操作 需要有axios

前端day1-09~10（TypeScript的介绍和常用类型）

TS的介绍

​编辑TS的常用数据类型

前端day2-01前端环境搭建

手动卸载原来的版本，重新下载v12版本的node

---

ps:想着写写东西记录一下，方便自己回忆知识，其实感觉写晚了，应该在第一集就开始，如果能帮他人解决一些麻烦那就更好了

前端day1-07~08（状态管理vuex的介绍和使用方式）

使用vue ui创建时勾选vuex即可

store包下的index.js文件下进行

1.state下定义共享数据

2.在mutation中定义函数，修改共享数据，方法里面的代码必须都是同步操作

3.mutation的函数的调用      this.$store.commit('函数名'，'参数')

示例 ： 按钮绑定点击事件调用函数1，函数1里调用mutation里的函数

4.actions 和mutation类似关键在于能够实现异步操作 需要有axios

安装axios  安装完后再index.js中导入

示例   mutation--commit   actions--dispatch

存在跨域问题，需要配置代理

前端day1-09~10（TypeScript的介绍和常用类型）

TS的介绍

npm install -g typescript 安装命令 如果报错就在输入cmd后按着shift+Ctrl+回车管理员权限打开

TS的常用数据类型

在编译TS文件的时候报错

① 使用 win+x 快捷键，会出现如下弹窗，鼠标左键单击Windows PowerShell 即可打开shell.

② 运行 set-ExecutionPolicy RemoteSigned 命令，在询问更改执行策略的时候选择敲Y或者A

③ 运行 get-ExecutionPolicy 命令，可看到脚本的执行策略已被更改为 RemoteSigned

就能解决报错了 解决方法来源：在vscode中用tsc编译ts文件的时候报错，tsc : 无法加载文件，因为在此系统上禁止运行脚本；SecurityError_vscode ts报错-优快云博客gg

TypeScript的要编译为JS文件才能运行，node命令执行JS

前端day2-01前端环境搭建

基础工程导入后下载报错，node版本过高， 需要降到v12，去安装了nvm用命令切换node版本，还出现问题，显示切换成功但是一查询版本就还是原来的

手动卸载原来的版本，重新下载v12版本的node

环境配置什么的看这个就行：

Node.js下载安装及环境配置教程【超详细】_nodejs下载-优快云博客

分页查询

1.在employee.ts文件写入方法

2.导入ts文件的方法，创建created方法

这里写错了，应该是this.records=res.data.data.records 赋值失败会导致一会查表格数据为空

插入表格

效果：

为了更好显示状态（启用禁用而不是数字），需要用到 template 

新增员工

复制粘贴element组件，修改后使用

this.$router.push('路径')  简写

修改员工信息

先实现按钮绑定路由跳转

修改和添加共用一个vue（addEmployee.vue）文件，在其中用路由中是否携带id参数来判断当前的操作是修改还是新增

 设置了optType来记录操作的类型，同时来决定一个按钮的显示与否 

修改操作还需要将原来的数据回显到页面上

this.$route.query.id          route不是router 

将返回的整体数据（res.data）中的data数据给表单达成回显 方法写到crated中是为了在页面加载完毕去获取到查询的信息

查询原来的信息

``用来动态拼接路由 也可以'/employee/'+id(b格太低）

修改员工信息 点击保存后提示成功并返回分页查询界面

  if (this.optType === 'add') {
            //表单校验通过 发起Ajax请求，提交数据到后端
            addEmployee(this.ruleForm).then((res) => {
              if (res.data.code === 1) {
                this.$message.success('添加成功')
                if (isContinue) {
                  this.ruleForm = {
                    ruleForm: {
                      name: '',
                      username: '',
                      sex: '1',
                      phone: '',
                      idNumber: '',
                    },
                  }
                } else {
                  this.$router.push('/employee')
                }
              } else {
                this.$message.error(res.data.msg)
              }
            })
          } else {
            //修改操作
            updateEmployee(this.ruleForm).then((res) => {
              if (res.data.code === 1) {
                this.$message.success('修改成功')
                this.$router.push('/employee')
              }
            })
          }
        }