金融宝-Day2

2023-12-17 15:12:28

一、简介

什么是NPM
NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。
在命令提示符输入 npm -v 可查看当前npm版本

npm -v

二、使用npm管理项目

创建08-npm文件夹

1、项目初始化

建立一个空文件夹，在命令提示符进入该文件夹执行命令初始化

npm init

按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。
如果想直接生成 package.json 文件，那么可以使用命令

npm init -y

2、修改npm镜像

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。
这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ，淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。
设置镜像地址：
经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载

npm config set registry https://registry.npm.taobao.org

查看npm配置信息

npm config list

3、npm install命令

基本命令

#使用 npm install 安装依赖包的最新版，
#简写 npm i
#模块安装的位置：项目目录\node_modules
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>
#默认参数：--save  简写  -S  将当前依赖保存在dependencies节点下
npm install axios

下载特定版本的依赖

#如果安装时想指定特定的版本
npm i axios@0.18.x

下载开发依赖

#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm i --save-dev mockjs
#或简写
npm i -D mockjs

根据依赖下载安装包

#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
npm i #根据package.json中的配置下载依赖，初始化项目

4、其它命令

#更新包（更新到最新版本）
npm update 包名

#卸载包
npm uninstall 包名

三、vue-element-admin

vue-element-admin是基于element-ui 的一套后台管理系统集成方案。

GitHub地址：https://github.com/PanJiaChen/vue-element-admin

项目在线预览：https://panjiachen.gitee.io/vue-element-admin

四、vue-admin-template

1、简介

vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。

GitHub地址：https://github.com/PanJiaChen/vue-admin-template

根据用户角色来动态生成侧边栏的分支：https://github.com/PanJiaChen/vue-admin-template/tree/permission-control

2、安装和运行

解压压缩包vue-admin-template-permission-control.zip
重命名为jrb-admin
进入目录

cd jrb-admin

安装依赖

npm install

启动。执行后，浏览器自动弹出并访问ht

npm run dev

五、前端配置

1、禁用ESLint语法检查

vue.config.js 第30行处禁用ESLint语法检查

lintOnSave: false,

2、添加prettier格式化配置

在vue项目根目录下新建一个文件.prettierrc

{
  "semi": false,
  "singleQuote": true,
  "htmlWhitespaceSensitivity": "ignore"
}

3、修改页面标题

src/settings.js 第3行处修改页面标题

4、国际化设置

src/main.js 第7行处修改语言

5、下拉菜单修改

6、登录页修改

src/views/login/index.vue
修改页面标题、登录按钮等

六、组件定义

1、创建vue组件

在src/views文件夹下创建以下文件夹和文件

2、core/integral-grade/list.vue

<template>
  <div class="app-container">
    积分等级列表
  </div>
</template>

3、core/integral-grade/form.vue

<template>
  <div class="app-container">
    积分等级表单
  </div>
</template>

七、路由定义

修改 src/router/index.js 文件，重新定义constantRoutes，拷贝到 dashboard路由节点下面
注意：每个路由的name不能相同

{
    path: '/core/integral-grade',
    component: Layout,
    redirect: '/core/integral-grade/list',
    name: 'coreIntegralGrade',
    meta: { title: '积分等级管理', icon: 'el-icon-s-marketing' },
    alwaysShow: true,
    children: [
      {
        path: 'list',
        name: 'coreIntegralGradeList',
        component: () => import('@/views/core/integral-grade/list'),
        meta: { title: '积分等级列表' }
      },
      {
        path: 'create',
        name: 'coreIntegralGradeCreate',
        component: () => import('@/views/core/integral-grade/form'),
        meta: { title: '新增积分等级' }
      },
      {
        path: 'edit/:id',
        name: 'coreIntegralGradeEdit',
        component: () => import('@/views/core/integral-grade/form'),
        meta: { title: '编辑积分等级' },
        hidden: true
      }
    ]
},

八、全栈开发流程

1、前端调用流程

下图是开发过程中涉及到和几个核心的模块，我们已经完成了路由的配置和页面组件的创建，接下来我们需要进一步完善页面组件的模板<template>部分，以及脚本<script>等部分的开发，然后创建前后端对接需要的api模块，最后通过api模块向后端接口发起调用。

2、nginx反向代理配置

目前，应用程序的前后端基本架构如下：srb-admin是前端程序，直接调用后端的srb-core微服务

为了能够让前端程序能够同时对接多个后端服务，我们可以使用多种解决方案，例如nginx反向代理、微服务网关等。这里我们先使用nginx作为前后端中间的反向代理层，架构如下

nginx的配置

server {
    #listen       80; #80端口已被占用
    server_name  localhost;
    listen	90;

    location ~ /core/ {           
        proxy_pass http://localhost:8110;
    }
    location ~ /sms/ {           
        proxy_pass http://localhost:8120;
    }
    location ~ /oss/ {           
            proxy_pass http://localhost:8130;
    }
}

注意：端口80如果被占用，则会跳出nginx端口占用，启动报错：bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a …)，此时需要换一个端口或者关闭端口80的服务才能启动

nginx的命令

start nginx #启动
nginx -s stop #停止
nginx -s reload #重新加载配置

前端的配置： .env.development

# base api：连接到nginx
VUE_APP_BASE_API = 'http://localhost'

3、mock-server

VUE_APP_BASE_API的修改会影响到平台模拟登录功能的mock数据，因此需要修改mock-server的地址
修改 mock/mock-server.js 文件第37行
url: new RegExp(/dev-api${url}),
修改 src/api/user.js中的接口调用，为每一个远程调用添加配置
baseURL: ‘/dev-api’,

改变后要重启项目

九、前端组件开发

1、定义api模块

创建文件 src/api/core/integral-grade.js

// @ 符号在vue.config.js 中配置， 表示 'src' 路径的别名
import request from '@/utils/request'

export default {
  list() {
    return request({
      url: '/admin/core/integralGrade/list',
      method: 'get'
    })
  }
}

2、定义页面组件脚本

src/views/core/integral-grade/list.vue

<script>
import integralGradeApi from '@/api/core/integral-grade'
export default {
  // 定义数据模型
  data() {
    return {
      list: [] // 数据列表
    }
  },

  // 页面渲染成功后获取数据
  created() {
    this.fetchData()
  },

  // 定义方法
  methods: {
    fetchData() {
      // 调用api
      integralGradeApi.list().then(response => {
        this.list = response.data.list
      })
    }
  }
}
</script>

3、定义页面组件模板

<template>
  <div class="app-container">
    <!-- 表格 -->
    <el-table :data="list" border stripe>
      <el-table-column type="index" width="50" />
      <el-table-column prop="borrowAmount" label="借款额度" />
      <el-table-column prop="integralStart" label="积分区间开始" />
      <el-table-column prop="integralEnd" label="积分区间结束" />
    </el-table>
  </div>
</template>

4、axios响应拦截器修改

src/utils/request.js 中将第49行的

if (res.code !== 20000) {

修改成

if (res.code !== 0 && res.code !== 20000) {

因为我们的后端接口统一结果判断0为成功的响应结果，而mock数据判断20000位正确的结果

十、删除数据

1、定义api

src/api/core/integral-grade.js

removeById(id) {
    return request({
        url: `/admin/core/integralGrade/remove/${id}`,
        method: 'delete'
    })
}

2、页面组件模板

src/views/core/integral-grade/list.vue，在table组件中添加删除列

<el-table-column label="操作" width="200" align="center">
    <template slot-scope="scope">
        <el-button
                   type="danger"
                   size="mini"
                   icon="el-icon-delete"
                   @click="removeById(scope.row.id)"
                   >
            删除
        </el-button>
    </template>
</el-table-column>

3、删除数据脚本

// 根据id删除数据
removeById(id) {
  this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      integralGradeApi.removeById(id).then(response => {
        this.$message.success(response.message)
        this.fetchData()
      })
    })
    .catch(error => {
      this.$message.info('取消删除')
    })
}

4、新增数据脚本

src/views/core/integral-grade/form.vue，引入api

import integralGradeApi from '@/api/core/integral-grade'
定义保存方法
methods: {
    saveOrUpdate() {
      // 禁用保存按钮
      this.saveBtnDisabled = true
      this.saveData()
    },

    // 新增数据
    saveData() {
      // debugger
      integralGradeApi.save(this.integralGrade).then(response => {
        this.$message({
          type: 'success',
          message: response.message
        })
        this.$router.push('/core/integral-grade/list')
      })
    }
}

十一、回显数据

1、列表页编辑按钮

src/views/core/integral-grade/list.vue，表格“操作”列中增加“修改”按钮

<router-link :to="'/core/integral-grade/edit/' + scope.row.id" style="margin-right:5px;" >
    <el-button type="primary" size="mini" icon="el-icon-edit">
        修改
    </el-button>
</router-link>

2、定义api

src/api/core/integral-grade.js

getById(id) {
    return request({
        url: `/admin/core/integralGrade/get/${id}`,
        method: 'get'
    })
}

3、获取数据脚本

src/views/core/integral-grade/form.vue，methods中定义回显方法

// 根据id查询记录
fetchDataById(id) {
    integralGradeApi.getById(id).then(response => {
        this.integralGrade = response.data.record
    })
}
页面渲染成功后获取数据
因为已在路由中定义如下内容：path: 'edit/:id'，因此可以使用 this.$route.params.id 获取路由中的id
//页面渲染成功
created() {
    if (this.$route.params.id) {
        this.fetchDataById(this.$route.params.id)
    }
},

十二、更新数据

1、定义api

src/api/core/integral-grade.js

updateById(integralGrade) {
    return request({
      url: '/admin/core/integralGrade/update',
      method: 'put',
      data: integralGrade
    })
}

2、更新数据脚本

src/views/core/integral-grade/form.vue，methods中定义updateData

// 根据id更新记录
updateData() {
    // 数据的获取
    integralGradeApi.updateById(this.integralGrade).then(response => {
        this.$message({
            type: 'success',
            message: response.message
        })
        this.$router.push('/core/integral-grade/list')
    })
}

完善saveOrUpdate方法

saveOrUpdate() {
    // 禁用保存按钮
    this.saveBtnDisabled = true
    if (!this.integralGrade.id) {
        this.saveData()
    } else {
        this.updateData()
    }
},

码农公寓

一、简介

二、使用npm管理项目

1、项目初始化

2、修改npm镜像

3、npm install命令

4、其它命令

三、vue-element-admin

四、vue-admin-template

1、简介

2、安装和运行

五、前端配置

1、禁用ESLint语法检查

2、添加prettier格式化配置

3、修改页面标题

4、国际化设置

5、下拉菜单修改

6、登录页修改

六、组件定义

1、创建vue组件

2、core/integral-grade/list.vue

3、core/integral-grade/form.vue

七、路由定义

八、全栈开发流程

1、前端调用流程

2、nginx反向代理配置

3、mock-server

九、前端组件开发

1、定义api模块

2、定义页面组件脚本

3、定义页面组件模板

4、axios响应拦截器修改

十、删除数据

1、定义api

2、页面组件模板

3、删除数据脚本

4、新增数据脚本

十一、回显数据

1、列表页编辑按钮

2、定义api

3、获取数据脚本

十二、更新数据

1、定义api

2、更新数据脚本

相关文章