【无标题】

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

首先下载压缩包单独创建文件夹，运行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 }
  ]

执行安装命令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

创建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的自动索引数据功能为:

 
        搜索 
      

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

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

        
            io.jsonwebtoken
            jjwt
        

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

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 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 claimsJws
                = Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token);
        Claims claims = claimsJws.getBody();
        return (String)claims.get("userName");
    }
}