前后端分离的web项目-前端-nuxt+elementui

目录

工具
流程
1. 创建项目
  •  C:\Users\warm9>D:
 D:\>yarn create nuxt-app demo03
2. 目录结构
  • 项目     
|-- assets  //用于组织未编译的静态资源     
|-- components     //用于组织应用的vue.js组件       
|-- layouts        //布局组件      
|-- middleware     //中间件       
|-- node_modules       
|-- pages      //视图页面      
|-- plugins      //插件      
|-- static     //静态资源      
|-- store      //状态管理      
|-- test       
|-- .nuxt.config.js        //配置文件        
|-- package.json
3. 配置图标
  • |-- static
   |--favicon.ico
4. axios
    • 配置
      package.json文件

  modules: [
    '@nuxtjs/axios','@nuxtjs/proxy'
  ],
  axios: {
      proxy: true, // 表示开启代理
      prefix: '/api/', // 表示给请求url加个前缀 /api
      credentials: true // 表示跨域请求时是否需要使用凭证
  },
  proxy: {
    '/api/': {
      target: 'http://localhost:8080', // 目标接口域名
      changeOrigin: true, // 表示是否跨域
      pathRewrite: {
        '^/api/': '/', // 把 /api 替换成 /
      }
    },
    '/webSocket':{
      target: 'http://localhost:8080', // 目标接口域名
      ws:true,
      changeOrigin: true, // 表示是否跨域
    }
  },
    • 使用
      this.$axios.get('/users/get_info').then(res=>{
      if(res.data.state==200){
        this.$store.commit('user/set',res.data.data.username)
        this.$store.commit('user/set_id',res.data.data.uid)
        this.$router.push('/home')
        this.$message(res.data.data.uid)
      }else{
        this.$router.push('/login')
      }
    })
let param = new URLSearchParams
param.append('所需参数','值')
this.$axios.post("/api/task/ids",param).then(res=>{
      if(res.data.state===200){
          alert('创建成功！')
      }else{
          alert(res.data.message)
      }
    }).catch(function (e) {
    console.log(e)
})
5. 视图页面
  • |-- pages
   |-- 视图（页面）名.vue
6. 布局页面
  • |-- layouts
   |-- 布局名.vue
    • 用法
       /*视图页面*/
 export default {
      name: "视图名称",
      layout:"布局名称",     
 }
7. websocket连接
  • export default {
      data(){
          return{
              socket: '',
          }
      },
      methods: {
        init :function(){
            if('WebSocket' in window){
                let wsServer = `${location.protocol === 'https' ? 'wss' : 'ws'}://${location.host}/webSocket/`;
                this.socket = new WebSocket(wsServer+this.uid)
                this.socket.onopen=this.onopen
                this.socket.onerror=this.onerror
                this.socket.onmessage=this.onmessage
                this.socket.onclose=this.onclose
            }else{
                alert("无法连接，请更换浏览器！")
            }
        },
        //连接
        onopen : function(){
            console.log("连接成功!")
        },
        //异常
        onerror:function(){
          console.log("连接失败！")
        },
        //接受信息
        onmessage:function(event){
          //弹窗信息方法
          this.$message(event.data)
        },
        //关闭
        onclose:function(){
          console.log("关闭连接！")
        }
      },
      mounted() {
        this.init()
        //页面关闭前关闭websocket
        window.addEventListener('beforeunload',()=>{if(this.socket)this.socket.close()})
      },
  }
8. 状态管理
    • 初始
      |-- store
   |-- user.js

      const state = ()=>({
  uid:"",
  username : ""
})

const mutations = {
  set(state,username){
    state.username = username
  },
  set_id(state,uid){
    state.uid = uid
  }
}
const actions = {
  nuxtServerInit({commit},req){
      console.log(1)
      console.log(req.session)
  }
}
export default {
  state,
  mutations,
  actions
}
    • 引用
        <div>{{username}}}</div>
  <script>
      export default {
            computed:{
              info(){
                  return this.$store.state.infos.infos | 0
              },
              username(){
                  return this.$store.state.user.username
              },
              uid(){
                  return this.$store.state.user.uid
              }
          },
      }
 </script>
    • 修改
      //第一个参数：状态js的名称/mutations中的方法；第二个参数：对应的修改后值
this.$store.commit("user/set","value")
9. 路由的使用
  • //参数为视图页面名称
this.$router.push('/login')
10. 状态监测
  • watch:{
     "$store.state.user.uid" : function() {
       
     }
  }
11. hosts配置（主机域名）
    • 路径
      |-- C:
  |-- Windows
      |-- System32
          |-- drivers
              |-- etc
                  |-- hosts
    • 添加内容
      127.0.0.1       域名
12. nginx 部署
    • 配置
      |--conf
    |--nginx.conf
      • 内容
        map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}
server{
  listen       端口;
  server_name 域名;
  location / {
        proxy_pass  http://127.0.0.1:3001;
    }

#nginx配置websocket
    location ^~ /webSocket {
        proxy_pass http://127.0.0.1:8080; #websocket地址
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_read_timeout 120s;

        proxy_set_header Upgrade websocket;
        proxy_set_header Connection Upgrade;
    }
}
posted @ 2020-12-30 15:50  牛五  阅读(707)  评论(0)  编辑  收藏  举报