码可拨锣项目总结

0项目实施部署

准备docker网络
docker network create --driver bridge --subnet 192.168.99.0/24 --gateway 192.168.99.1 my-blog-net
#准备redis
docker run -p 6379:6379 --name redis-01 --net my-blog-net --ip= -v /root/mk-backsystem/redis/conf/redis.conf:/etc/redis/redis.conf -v /root/mk-backsystem/redis/data:/data -d redis:buster redis-server /etc/redis/redis.conf --appendonly yes
#打包后端项目
Dockerfile
# jdk8基础镜像
FROM majiajue/jdk1.8:latest
# 定义参数
ARG JAR_FILE
#拷贝文件到容器
COPY ${JAR_FILE} myApp.jar
#端口暴露
EXPOSE 8888
#容器启动后执行的命令
ENTRYPOINT ["java","-jar","/myApp.jar"]
#打镜像
 docker build --build-arg JAR_FILE=blog-api-1.0-SNAPSHOT.jar -t blog_app:v1 .
#运行容器
docker run -id --name myblogapp --net my-blog-net -p 8888:8888 blog_app:v1

docker run --name tomcat001 -p 9999:8080 -id tomcat
#
/usr/local/tomcat/webapps

#打包前端项目
Dockerfile
# tomcat基础镜像
FROM docker.io/library/tomcat
# 定义参数
ARG HTML_FILE
#拷贝文件到容器
COPY ${HTML_FILE} /usr/local/tomcat/webapps
#端口暴露
EXPOSE 8080

构建镜像
 docker build --build-arg HTML_FILE=mk-blog -t blog_face:v1 .
运行前端容器
docker run --name tomcat_blog --net my-blog-net -p 8080:8080 -id blog_face:v1 

1 vuex

个人理解为前端应用缓存
a 引入vue,vuex,接口，当然vuex是需要安装的

import Vuex from 'vuex'
import Vue from 'vue'
import {register,getUserInfo,logout,login} from '@/api/login'

b 添加到vue

Vue.use(Vuex);

c 基本结构

export default new Vuex.Store({
state: {
    id: '',
    token: localStorage.token,
  },
  // 设置信息的方法,可以理解为java中的set方法
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token;
    },
    SET_ID: (state, id) => {
      state.id = id
    }
  },
  actions: {
  // 下方为案例写法
  // 调用接口的方法，{commit}为自带参数用于调用vuex的set方法
  // localStorage.token为浏览器的缓存
  // Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。
  // rejected: 意味着操作失败。
  // 当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...) 
  login({commit}, user) {
      return new Promise((resolve, reject) => {
          login(user).then(res => {
              if(res.data.success){
                  commit('SET_TOKEN', res.data.data)
                  localStorage.token=res.data.data;
                  resolve()
              }else{
                  reject(res.data.msg)
              }
          }).catch(error => {
              reject(error)
          })
      })
    }
  }
})

d 调用
直接使用$store.dispatch(‘actions中的方法’, 参数)

that.$store.dispatch('login', that.userForm).then(() => {
            that.$router.go(-1)
          }).catch((error) => {
            if (error !== 'error') {
              that.$message({message: error, type: 'error', showClose: true});
            }
          })

2 vue中的导航守卫

说白了就是站在路由的角度放置的拦截器，而axiso中的拦截器是指的拦截请求。

router.beforeEach((to, from, next) => {
  if (store.state.token) {
    if (to.path === '/login') {
        console.log('您已有登陆令牌')
      next({path: '/'})
    } else {
      if (store.state.account.length === 0) {
        store.dispatch('getUserInfo').then(data => { //获取用户信息
            console.log('导航守卫：调用了获取用户信息的方法')
            next()
        }).catch(() => {
          Message({
            type: 'warning',
            showClose: true,
            message: '登录已过期'
          })
		  //登陆过期去登陆页面
          next({path: '/login'})
        })
      } else {
        next()
      }
    }
  } else {
    if (to.matched.some(r => r.meta.requireLogin)) {
      Message({
        type: 'warning',
        showClose: true,
        message: '请先登录哦'
      })
    }
    else {
      next();
    }
  }
});

3 vue中的请求

首先封装axiso请求，包括baseURL,超时时间等。这样可以在切换环境的时候非常轻松的改变接口ip。

import axios from 'axios'

const service = axios.create({
  baseURL: "http://localhost:8888",
  timeout: 10000
})

export default service

然后在需要的地方引入（一般按照业务模块进行划分），如文章模块的查询，保存接口放在一起，并且以方法的形式对外暴露，这一部分习惯叫做定义api。

import request from "@/request"
// 1获取文章列表
export function api_getArticles(params) {
	return request({
		  method: 'post',
		  url: '/articles',
		  data: params
		})
}

最后在需要的地方进行引用，多个api方法引入时候使用逗号隔开。

import {xxx, ccc} from '@/api/comment'

如进入文章页面前需要调用查询文章接口加载文章数据,下面格式为调用api时候通用的写法。

		viewArticle(that.$route.params.id).then(resp => {
				  //需要注意的是,resp.data才是我们接口返回的数据
		          Object.assign(that.article, resp.data.data)
		        }).catch(error => {
		          if (error !== 'error') {
		            that.$message({type: 'error', message: error, showClose: true})
		          }
		        })

4 vue中拦截器的应用

a 携带token

// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    if (store.state.token) {
    	config.headers['Authorization'] = localStorage.token
  	}
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

b 动态响应
如：根据响应的状态码动态弹窗提示

// 添加响应拦截器
 service.interceptors.response.use(function (response) {
     // 对响应数据做点什么
      const res = response.data;
     //0 为成功状态
     if (res.code !== 200) {
       if (res.code === 10002) {
         Message({
           type: 'warning',
           showClose: true,
           message: '未登录或登录超时，请重新登录亲'
         })
         return Promise.reject('error');
       }
     }
     return response;
   }, function (error) {
     // 对响应错误做点什么
     return Promise.reject(error);
   });
	

5 vue项目build后路由问题

a 将路由模式修改为hash

const router=new VueRouter({
    mode:"hash",
	// 003将配置放到实例中
	routes
})

b 在vue.config.js文件中添加publicPath: "./"没有就创建一个

module.exports={
	runtimeCompiler:true,
	publicPath: "./"
}

c 编译构建vue

npm run build

6 docker容器文件复制

 docker cp ./mk-blog/ tomcat001:/usr/local/tomcat/webapps

其中tomcat001为容器的名称，当然也可以是容器id

7 常规指令

docker pull tomcat
docker run --name tomcat001 -p 9999:8080 -id tomcat
docker exec -it tomcat001 /bin/bash

…持续更新