尚医通（六）前端页面搭建说明 | vue-element-admin

╰半橙微兮° 2024-03-30 13:34 57阅读 0赞

#### 目录 ####

*  一、vue-element-admin
 *   *  1、简介
     *  2、安装
 *  二、vue-admin-template
 *   *  1、简介
     *  2、安装
 *  二、前端页面环境说明
 *  三、项目的创建和基本配置
 *   *  1、创建项目
     *  2、修改项目信息
     *  3、如果需要修改端口号
     *  4、登录页修改
     *  5、页面零星修改
     *  6、登录页面添加自定义背景
 *  四、把系统登录功能改造成后端接口
 *   *  1、系统登录默认使用这个地址
     *  2、把登录请求地址改造本地
     *  3、进行登录调用两个方法，login登录操作方法
     *  4、开发接口
     *  5、修改api文件夹login.js修改本地接口路径
 *  五、框架使用过程4个步骤分析
 *   *  1、编写路由相关信息
     *  2、编写路由跳转的页面
     *  3、封装专门的js文件，调后端接口
     *  4、回到路由跳转的页面
 *  六、框架使用过程4个步骤实现
 *   *  1、编写路由相关信息
     *  2、编写路由跳转的页面
     *  3、封装专门的js文件，调后端接口
     *  4、回到路由跳转的页面

## 一、vue-element-admin ##

### 1、简介 ###

而vue-element-admin是基于element-ui 的一套后台管理系统集成方案。  
GitHub地址：[https://gitee.com/julywind/vue-element-admin][https_gitee.com_julywind_vue-element-admin]  
项目在线预览：[https://panjiachen.gitee.io/vue-element-admin/\#/dashboard][https_panjiachen.gitee.io_vue-element-admin_dashboard]

### 2、安装 ###

# 解压压缩包
    # 进入目录
    cd vue-element-admin-master
    
    # 安装依赖
    npm install
    
    # 启动。执行后，浏览器自动弹出并访问http://localhost:9527/
    npm run dev

## 二、vue-admin-template ##

### 1、简介 ###

vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。  
GitHub地址：[https://github.com/PanJiaChen/vue-admin-template][https_github.com_PanJiaChen_vue-admin-template]  
建议：你可以在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

### 2、安装 ###

# 解压压缩包
    # 进入目录
    cd vue-admin-template-master
    
    # 安装依赖
    npm install
    
    # 启动。执行后，浏览器自动弹出并访问http://localhost:9528/
    npm run dev

禁用vue.config.js文件中的EsLint代码检查  
![在这里插入图片描述][7daa5720769f42599adb47185d736808.png]

## 二、前端页面环境说明 ##

*  build目录：放项目构建的脚本文件
 *  mock目录：前端人员模拟后产生的数据
 *  node\_modules目录：项目依赖模块
 *  src：项目源代码
 *  static：静态资源
 *  package.jspon：项目信息和依赖配置

src
    ├── api // 各种接口，定义调用方法
    ├── assets // 图片等资源 
    ├── components // 各种公共组件，非公共组件在各自view下维护 
    ├── icons // 图标 
    ├── router // 路由表 
    ├── store // 存储 
    ├── styles // 各种样式 
    ├── utils // 公共工具，非公共工具，在各自view下维护 
    ├── views // 各种layout，具体页面
    ├── App.vue //项目顶层组件
    ├── main.js //项目入口文件
    └── permission.js //认证入口

## 三、项目的创建和基本配置 ##

### 1、创建项目 ###

将vue-admin-template-master重命名为hos-admin

### 2、修改项目信息 ###

package.json

{
        
        "name": "hos-admin",
        ......
        "description": "医院后台管理系统",
        "author": "Donglin <1909529369@qq.com>",
        ......
    }

### 3、如果需要修改端口号 ###

根目录下vue.config.js修改

port: 9528

![在这里插入图片描述][63bad81cde15458d920dd3e1a0c6897e.png]

### 4、登录页修改 ###

src/views/login/index.vue（登录组件）

<h3 class="title">医院后台管理系统</h3>

<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>

### 5、页面零星修改 ###

1、修改浏览器标签名称  
\\src\\settings.js

title: '医院后台管理系统',

修改后热部署功能，浏览器自动刷新  
2、国际化设置  
打开 src/main.js（项目的js入口），第7行，修改语言为 zh-CN，使用中文语言环境，例如：日期时间组件

import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

3、icon  
public目录下面  
复制 favicon.ico  
4、导航栏文字  
src/views/layout/components（当前项目的布局组件）  
src/views/layout/components/Navbar.vue

<el-dropdown-item>
        首页
    </el-dropdown-item>

5、面包屑文字  
src/components（可以在很多项目中复用的通用组件）  
src/components/Breadcrumb/index.vue

meta: {
         title: '首页' }

### 6、登录页面添加自定义背景 ###

[https://donglin.blog.csdn.net/article/details/128511550][https_donglin.blog.csdn.net_article_details_128511550]

## 四、把系统登录功能改造成后端接口 ##

### 1、系统登录默认使用这个地址 ###

![在这里插入图片描述][a3faa898414d4d6e84e21996b824938d.png]

![在这里插入图片描述][bf970aa790ec48c3a52b250db2f095a4.png]  
登出  
![在这里插入图片描述][c604bc7392834fa08c231e94647c6c3d.png]

### 2、把登录请求地址改造本地 ###

在根目录下.env.development

#VUE_APP_BASE_API = '/dev-api'
    VUE_APP_BASE_API = 'http://localhost:8201'

### 3、进行登录调用两个方法，login登录操作方法 ###

通过查看/src/store/modules/user.js文件发现：  
（1）login 返回token值  
（2）info 返回roles、name、avatar头像。

### 4、开发接口 ###

**记得设置跨域问题**

@RestController
    @RequestMapping("/admin/user")
    @CrossOrigin  //解决跨域
    public class UserController {
        
    
        //login
        @PostMapping("/login")
        public R login() {
        
            return R.ok().data("token","admin");
        }
    
        //info
        @GetMapping("/info")
        public R info() {
        
            return R.ok().data("roles","[admin]").data("name","admin").data("avatar","https://media.tenor.com/wKpR3DfIZPgAAAAC/%E8%94%A1%E5%BE%90%E5%9D%A4-kiss.gif");
        }
    
        //logout
        @PostMapping("/logout")
        public String logout() {
        
            return "{\"code\":20000,\"data\":\"success\"}";
        }
    
    
    
    }

### 5、修改api文件夹login.js修改本地接口路径 ###

![在这里插入图片描述][ab7396b8e49c47c1a5b21305fc010c55.png]

## 五、框架使用过程4个步骤分析 ##

### 1、编写路由相关信息 ###

![在这里插入图片描述][70e422d1045349b8b506c6e9af327841.png]

### 2、编写路由跳转的页面 ###

@是src目录  
![在这里插入图片描述][bb0d7e5a441f4f78ad8acab50ee6747b.png]  
对应页面是  
![在这里插入图片描述][7e11fa618ef241ff8f7adc6626ca76c9.png]  
vue页面引入js文件，调用方法实现功能

引入 import user from '.....'
    
    data:{
        
    },
    created(){
        
    },
    methods:{
        
    }

### 3、封装专门的js文件，调后端接口 ###

src/api/yygh/xxx.js

export function xxxxx(xxxxx) {
        
      return request({
        
        url: 'xxx',
        method: 'xxx',
        params: {
         xxx }
      })
    }

### 4、回到路由跳转的页面 ###

1.引入js文件  
2.调用js文件中的方法请求后端接口  
3.将后端返回的数据在页面展示回来

## 六、框架使用过程4个步骤实现 ##

### 1、编写路由相关信息 ###

{
        
        path: '/yygh/hospset',
        component: Layout,
        redirect: '/yygh/hospset/list',
        name: '医院设置信息',
        meta: {
         title: '医院设置信息', icon: 'el-icon-s-help' },
        children: [
          {
        
            path: 'list',
            name: '医院设置列表',
            component: () => import('@/views/yygh/hospset/list'),
            meta: {
         title: '医院设置列表', icon: 'table' }
          },
          {
        
            path: 'save',
            name: '医院设置添加',
            component: () => import('@/views/yygh/hospset/save'),
            meta: {
         title: '医院设置添加', icon: 'tree' }
          }
        ]
      },

### 2、编写路由跳转的页面 ###

![在这里插入图片描述][55dfa6b3d03b4af599bc370e0ccd2534.png]  
list.vue

<template>
        <div class="app-container">
            医院设置列表
        </div>
    </template>

save.vue

### 3、封装专门的js文件，调后端接口 ###

src/api创建hospset.js

import request from '@/utils/request'
    
    
    const API = "/admin/hosp/hospitalSet"
    //es6导入语法
    export default{
        
        getHospsetPage(pageNum,size,searchObj) {
        
            return request({
        
              url: `${
        API}/page/${
        pageNum}/${
        size}`,
              method: 'post',
              //如果携带的是普通参数:params,如果携带的json数据:data
              data:searchObj
            })
          }
    }

### 4、回到路由跳转的页面 ###

<template>
        <div class="app-container">
            <el-table
          :data="rows"
          style="width: 100%">
    
          <el-table-column
            prop="id"
            label="id"
            width="180">
          </el-table-column>
    
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="180">
          </el-table-column>
          
          <el-table-column
            prop="updateTime"
            label="更新时间">
          </el-table-column>
        </el-table>
        </div>
    </template>
    <script>
    import hospset from '@/api/hospset.js'
    export default {
        
        data(){
        
            return{
        
                rows:[],
                total:0,
                searchObj:{
        }
            }
        },
        methods:{
        
    
        },
        created(){
        
            hospset.getHospsetPage(1,5,this.searchObj).then(resp=>{
        
                this.total = resp.data.total;
                this.rows = resp.data.rows;
            })
        }
    }
    </script>

![在这里插入图片描述][0e235522ddc341b7875bae42a559d9f0.png]

[https_gitee.com_julywind_vue-element-admin]: https://gitee.com/julywind/vue-element-admin
[https_panjiachen.gitee.io_vue-element-admin_dashboard]: https://panjiachen.gitee.io/vue-element-admin/#/dashboard
[https_github.com_PanJiaChen_vue-admin-template]: https://github.com/PanJiaChen/vue-admin-template
[7daa5720769f42599adb47185d736808.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a577674d57694ac0bad2e399aba6d870.png
[63bad81cde15458d920dd3e1a0c6897e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/360f76c228e8473d9350ef475ffdf116.png
[https_donglin.blog.csdn.net_article_details_128511550]: https://donglin.blog.csdn.net/article/details/128511550
[a3faa898414d4d6e84e21996b824938d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/ab899713ae85424f891a7b5c6e1b1bba.png
[bf970aa790ec48c3a52b250db2f095a4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/80cef880cc184fd38871f5d4ae74d393.png
[c604bc7392834fa08c231e94647c6c3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/106eeb9cc14646c88b0fd7fb0c824886.png
[ab7396b8e49c47c1a5b21305fc010c55.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/5a936d3b48934008bafcd431148700ef.png
[70e422d1045349b8b506c6e9af327841.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/8a801e0de778492699219f2d1536c51a.png
[bb0d7e5a441f4f78ad8acab50ee6747b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/dba16b62dc374ce0a160896ca24cfee8.png
[7e11fa618ef241ff8f7adc6626ca76c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/2fc440ac579443549a20fba555cda8a9.png
[55dfa6b3d03b4af599bc370e0ccd2534.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/5d01cb4a64b14b8dad712c232b6f3a58.png
[0e235522ddc341b7875bae42a559d9f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/74bb093f19294c369e3f0dab76f8c4f8.png