前后端分離的web項目-前端-nuxt+elementui

目錄

• 工具
• 流程
  • 1. 創建項目
  • 2. 目錄結構
  • 3. 配置圖標
  • 4. axios
  • 5. 視圖頁面
  • 6. 布局頁面
  • 7. websocket連接
  • 8. 狀態管理
  • 9. 路由的使用
  • 10. 狀態監測
  • 11. hosts配置（主機域名）
  • 12. nginx 部署

工具

• node.js http://nodejs.cn/download/
• yarn https://yarn.bootcss.com/docs/install/#windows-stable
• nuxt開發文檔 https://www.nuxtjs.cn/guide/installation
• element-ui組件文檔 https://element.eleme.cn/#/zh-CN/component/installation
• nginx http://nginx.org/en/download.html
• 比較詳細的Nuxt 開發搭建博客 https://segmentfault.com/a/1190000038284277

  上邊這個博客已經介紹的比較詳細
  以下記錄初次開發的簡單流程

流程

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;
          }
      }