前后端分离的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;
          }
      }