【无标题】

5.12：

提示：这里简述项目相关背景：

以后docker启动nacos的时候请他妈的先启动nacos再打开idea。真他妈的唇笔nacos玩意。

nuxt前端页面的搭建

首先下载压缩包单独创建文件夹，运行npm install来下载所需要的依赖，npm run dev运行监测bug，引入element-ui

npm install element-ui
在plugin中创建plugin.js引入element-ui

import Vue from 'vue'
import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI

在nuxt.config.js文件中使用myPlugin.js

@Override
	public void run() {
		bytes = mmInStream.read(buffer);
		mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();
	}

在build下面添加内容：

plugins: [
    { src: '~/plugins/myPlugin.js', ssr: false }
  ]

封装axios

执行安装命令npm install axios
创建utils文件夹，utils下创建request.js

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
// 创建axios实例
const service = axios.create({
    baseURL: 'http://localhost',
    timeout: 15000 // 请求超时时间
})
// http request 拦截器
service.interceptors.request.use(
    config => {
    // token 先不处理，后续使用时在完善
    return config
},
  err => {
    return Promise.reject(err)
})
// http response 拦截器
service.interceptors.response.use(
    response => {
        if (response.data.code !== 200) {
            Message({
                message: response.data.message,
                type: 'error',
                duration: 5 * 1000
            })
            return Promise.reject(response.data)
        } else {
            return response.data
        }
    },
    error => {
        return Promise.reject(error.response)
})
export default service

修改layouts/default.vue文件的内容：

<template>
  <div class="app-container">
    <div id="main">
      <!-- 公共头 -->
      <myheader/>
      <div class="main-container">
        <el-scrollbar class='page-component__scroll'>
        <!-- 内容区域 -->
        <nuxt/>
        </el-scrollbar>
      </div>
        <!-- 公共底 -->
      <myfooter/>
    </div>
  </div>
</template>
<script>
import '~/assets/css/app.css'
import '~/assets/css/chunk.css'
import '~/assets/css/iconfont.css'
import '~/assets/css/main.css'
export default {
 }
</script>

---

创建api文件存放后端的接口地址,其中接口js文件的书写格式一般为:

import request from '@/utils/request'

const api_name = `/admin/cmn/dict`

export default{
    findByDictCode(dictCode){
        return request({
            url:`${api_name}/findByDictCode/${dictCode}`,
            method:'get'
            params:searchObj
        })
    },
    findChildData(parentId){
        return request({
            url:`${api_name}/findChildData/${parentId}`,
            method:'post'
            data:searchObj
        })
    },
    
}

在nuxt中:

 //服务端渲染的方法
  //asyncData:渲染组件之前异步获取数据
  asyncData({params,error}){//params得到路径的值 error异常
    return hosp.findHospList(1,10,null)
    .then((response) => {
      return{
        list : response.data.content,
        page : response.data.totalPages
      }
      
    }).catch((err) => {
      console.log(111)
    });
  },

elui的自动索引数据功能为:

 <el-autocomplete
      class="search-input"
      prefix-icon="el-icon-search"
      v-model="hosname"
      :fetch-suggestions="querySearchAsync"
      placeholder="点击输入医院名称"
      @select="handleSelect"
      >
        <span slot="suffix" class="search-btn v-link highlight clickable selected">搜索 </span>
      </el-autocomplete>

其中:fetch-suggestions:在输入框输入值，弹出下拉框，显示相关内容;@select: //在下拉框选择某一个内容，执行下面方法，跳转到详情页面中;v-model:绑定输入框中显示的内容

关于token的引入
首先引入依赖

        <dependency>
            <groupId>io.jsonwebtoken</groupId>
            <artifactId>jjwt</artifactId>
        </dependency>

设置工具类单独存档具体的方法:

public class JwtHelper {
    private static long tokenExpiration = 24*60*60*1000;
    private static String tokenSignKey = "123456";

    //根据参数生成token
    public static String createToken(Long userId, String userName) {
        String token = Jwts.builder()
                .setSubject("YYGH-USER")
                .setExpiration(new Date(System.currentTimeMillis() + tokenExpiration))
                .claim("userId", userId)
                .claim("userName", userName)
                .signWith(SignatureAlgorithm.HS512, tokenSignKey)
                .compressWith(CompressionCodecs.GZIP)
                .compact();
        return token;
    }
    //根据token字符串得到用户id
    public static Long getUserId(String token) {
        if(StringUtils.isEmpty(token)){ return null;}
        Jws<Claims> claimsJws = Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token);
        Claims claims = claimsJws.getBody();
        Integer userId = (Integer)claims.get("userId");
        return userId.longValue();
    }
    //根据token字符串得到用户名称
    public static String getUserName(String token) {
        if(StringUtils.isEmpty(token)) {
            return "";
        }
        Jws<Claims> claimsJws
                = Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token);
        Claims claims = claimsJws.getBody();
        return (String)claims.get("userName");
    }
}