更新代码

1567dbb6 · tangjiale · f318c0f7 · 1567dbb6 · 1567dbb6 · 1567dbb6
Commit 1567dbb6 authored Sep 28, 2022 by tangjiale
8 changed files
--- a/README.md
+++ b/README.md
@@ -6,6 +6,8 @@
 * @LastEditTime: 2022-04-09 16:22:40
 -->

+# 服务端访问域名：http://182.254.228.249:7001/screen
+
 # 为什么选择nuxt框架?  （nuxt.js官网：https://zh.nuxtjs.org/ 当前选用版本为2.9.2）
 - 1.由于历史原因，需要封装新的框架/封装业务组件，基于 "轻量简洁" "统一复用" 提高代码的可读性维护性，提高开发者编码效率，减轻开发者编码时间压力。
 - 2.基于以往的工作经历 并且 通过 '体质健康/中考等项目(后台)' '跳绳商品详情(h5 => 混合app/公众号/:可联调微信/支付宝)' 'ssr-pc (pc/m 站)'实践，Nuxt.js基本满足各端业务需求。
@@ -23,8 +25,8 @@
  3.`对于开发人员来讲，需要去兼容代码在不同环境的运行 Vue SSR 所需要的服务端环境是 Node，有一些客户端的对象，比如 dom、windows 之类的则无法使用。`
  4.`相对于前后端分离模式下服务器只需要提供静态资源来说，SSR 需要的服务器负载更大，所以在项目中使用 SSR 模式要慎重 （根据访问量定夺）`

-# spa框架可参考 
-  中台项目:http://git.xiaobentiyu.cn/qingjiquan/goods-admin-h5.git 
+# spa框架可参考
+  中台项目:http://git.xiaobentiyu.cn/qingjiquan/goods-admin-h5.git
  H5单页应用：http://git.xiaobentiyu.cn/qingjiquan/sport-goods-h5.git
 # ssr框架可参考
  PC网站:http://git.xiaobentiyu.cn/tangjiale/ssr-pc.git `完整部署流程可参考:https://juejin.cn/post/6924504408638259213`
@@ -46,18 +48,18 @@
 - ssr : [val:'universal']  表示打包ssr应用

 - [css]
- spa&&ssr 在Nuxtjs里配置全局的 CSS 字体库、本地公共CSS、UI框架CSS。 
+- spa&&ssr 在Nuxtjs里配置全局的 CSS 字体库、本地公共CSS、UI框架CSS。
  (每个页面都会被引入) => ['@/static/css/icon-font.css','~/plugins/index.less','element-ui/lib/theme-chalk/index.css']

- [plugins] 
+- [plugins]
 - spa&&ssr 使得你可以轻易地为 Nuxt.js 配置使用 Vue.js 插件 （可进行路由中间件、http请求、插件注册等工作）
  可参考=> 'http://git.xiaobentiyu.cn/tangjiale/ssr-pc.git' => /plugins/index.js 或 /plugins/axios.js
- 
+
 - [router.base]
- spa : [val:'/html/当前项目所属模块/']  可自定义 ‘/html/{模块名}’  避免各模块url互相干扰  如运动项目-'/html/sport/~' 商城项目-'/html/shops/~' 
- ssr : [val:'']  固定空字符串，因为ssr的路由是要遵循seo那边的要求做的 
+- spa : [val:'/html/当前项目所属模块/']  可自定义 ‘/html/{模块名}’  避免各模块url互相干扰  如运动项目-'/html/sport/~' 商城项目-'/html/shops/~'
+- ssr : [val:'']  固定空字符串，因为ssr的路由是要遵循seo那边的要求做的

- [router.middleware] 
+- [router.middleware]
 - spa&&ssr 例：[val:'user'] 在每页渲染前运行 /middleware/user.js 中间件的逻辑
  `常用业务如 每当页面进来需要是否储存userInfo或token，如没有重定向login页面`
  `如页面需要处理url带来的参数,也可以在中间件中处理,再加载页面同步最新更新的数据`
@@ -67,4 +69,4 @@
 - ssr : [val:'ssr']     表示ssr的路由是从ssr目录读取 （可动态配置路由，多个路由指向同一页面）
  (1) 多url共用一个页面   如 '/html/a'与'/html/b' 多域名可指向同一页面
  (2) 可自定义配置动态路由 1.`/html/${id}` 2.`/html/shops-${id}/` 3.`/html/${id}/${areaId}/`
-  (3) 可以根据 id 数据的不同 配置动态的seo信息 给不同的页面
\ No newline at end of file
+  (3) 可以根据 id 数据的不同 配置动态的seo信息 给不同的页面
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -44,12 +44,8 @@ module.exports = {
            return [
                ...routes,
                {
-                    path: '/tired/:id(\\d+)/',
-                    component: '~/ssr/tired/_id.js'
-                },
-                {
-                    path: '/',
-                    component: '~/ssr/test.js'
+                    path: '/csScreen/:type(\\d+)/',
+                    component: '~/ssr/csScreen/_type.js'
                },
            ];
        }
@@ -96,7 +92,7 @@ module.exports = {
    ],
    plugins: [
      '@/plugins/axios.js',
-      '~/plugins/index',
+      '~/plugins/index'
    ],

    build: {

--- a/pages/components/center-video.vue
+++ b/pages/components/center-video.vue
@@ -64,7 +64,12 @@
    },
    created(){

-      this.banners = this.type == 2 ? this.list : ['https://cdn.xiaobentiyu.cn/yueluscreen/1.jpg','https://cdn.xiaobentiyu.cn/yueluscreen/2.jpg','https://cdn.xiaobentiyu.cn/yueluscreen/3.jpg']
+       this.banners = this.type == 2 ? this.list 
+      : this.type == 4 ? ['https://cdn.xiaobentiyu.cn/images/20220426190929.png']
+      : this.type == 5 ? ['https://cdn.xiaobentiyu.cn/images/20220428142516.png']
+      : this.type == 6 ? ['https://cdn.xiaobentiyu.cn/images/20220701105915.jpg']   //开福区
+      : this.type == 7 ? ['https://cdn.xiaobentiyu.cn/screen/ly-1.jpg','https://cdn.xiaobentiyu.cn/screen/ly-2.jpg']   //浏阳市
+      : ['https://cdn.xiaobentiyu.cn/yueluscreen/1.jpg','https://cdn.xiaobentiyu.cn/yueluscreen/2.jpg','https://cdn.xiaobentiyu.cn/yueluscreen/3.jpg']
    },
    mounted(){


--- a/pages/screen.vue
+++ b/pages/screen.vue
 <template>
    <div class="index-page">
-        <div class="index-page-head">{{type == 2 ? '天心区智慧体育监测平台' : '岳麓区智慧体育服务平台'}}</div>
+        <div class="index-page-head">{{`${pageTitle[type]}智慧体育监测平台`}}</div>
        <div class="flex-s">
            <div class="left">
                <comBox height="284px" title="智能设备使用监测（本学期）">
@@ -58,23 +58,24 @@
    },
    data(){
      return{
-        type:2,
+        type:'',
+
+        pageTitle:['','','天心区','岳麓区','芙蓉区','雨花区','开福区','浏阳市'],

        dataObj:{},
        localBanner:[]
      }
    },
    async asyncData ({app,query,params,redirect,returnData}) {
-
-      let dataObj = await screen.handleScreenData(app)
-
-      console.log('数据由服务端渲染')
-
+      let {type = 2} = params
+      let dataObj = await screen.handleScreenData(app,type)
      return returnData({
-        dataObj
+        dataObj,
+        type:type
      })
    },
    async mounted(){
+      
       this.localBanner = this.dataObj.banner || []


@@ -94,7 +95,7 @@
    methods:{
      async updateNewData(){
        this.dataObj = {}
-        this.dataObj = await screen.handleScreenData(app)
+        this.dataObj = await screen.handleScreenData(app,this.type)
      }
    }
  }

--- a/plugins/axios.js
+++ b/plugins/axios.js
+/*
+ * @Author: tangjiale
+ * @eMail: 932055106@qq.com
+ * @Date: 2022-06-24 16:07:59
+ * @LastEditors: tangjiale
+ * @LastEditTime: 2022-07-08 09:32:20
+ */

 import Vue from 'vue'
 import qs from 'qs';

+//http://t.zoukankan.com/goloving-p-11374165.html

+//获取当前环境变量
 let config = require(`@/config/${process.env.ENV_CONFIG||'pro'}.config.json`);

 export default ({app:{ $axios, redirect, router, store}},inject) => {

-  //配置域名
-  $axios.defaults.baseURL = config.pigsy
-
-
  //设置请求头功能属性
  $axios.setHeader('Content-Type', 'application/json')  //请求类型  默认json

@@ -18,13 +23,11 @@ export default ({app:{ $axios, redirect, router, store}},inject) => {
  $axios.defaults.timeout = 10000

  // 请求拦截
-  $axios.onRequest(config => {
-
-
+  $axios.onRequest(option => {
    // if (store.getters && store.getters.token) {
    //   config.headers.authorization = 'Bearer ' + store.getters.token
    // }
-    return config
+    return option
  })

  // 响应拦截
@@ -41,17 +44,20 @@ export default ({app:{ $axios, redirect, router, store}},inject) => {

  // 向nuxt注入一个内置的方法
  inject('axiosApi', (url, params, option = {}) => {
-
+    
    /**
-     *  获取动态配置域名 base
+     *  动态获取配置域名 base
    */
-    let base = config[ option.domainKey || 'monk' ]
+    $axios.defaults.baseURL = config[ option.domainKey || 'pigsy' ]
+
+
+    console.log($axios.defaults.baseURL)

    /**
-     *  自定义配置请求头 option
+     *  自定义请求头配置 option
    */
    let headers = {
-      'tangjiale':'asdasdasdadasdasdada'
+      // 'tangjiale':'asdasdasdadasdasdada'
    }
    //请求类型,默认get
    let method = option.method || 'get'
@@ -60,17 +66,17 @@ export default ({app:{ $axios, redirect, router, store}},inject) => {
      Object.assign(headers, {
        'Content-Type': 'application/x-www-form-urlencoded'
      });
-
      params = qs.stringify(params);
    } else {
      Object.assign(headers, {
        'Content-Type': 'application/json'
      });
    }
+    //最终请求头部参数
    let finalHeaders = Object.assign(headers, headers);

    return new Promise((resolve, reject) => {
-      //TODO $get只返回data get会返回包含code和data的数据对象
+      //TODO $get只返回data get会返回包含code和data的数据对象，所以要把 get 请求转为 $get
      $axios[ method == 'get' ? 'get' : ('$' + method) ](
        url, method === 'get' ? {params: params} : params, {headers: finalHeaders}).then(res => {
        if (res.code && res.code == 200) {
@@ -80,13 +86,13 @@ export default ({app:{ $axios, redirect, router, store}},inject) => {
        }
      }).catch(err => {
        console.error(JSON.stringify({
-          host: base,
+          host: $axios.defaults.baseURL,
          url: url,
          data: params,
          headers: finalHeaders,
          reqError: JSON.stringify(err)
        }));
-        throw new Error(JSON.stringify(err));
+        // throw new Error(JSON.stringify(err));
      });

    })

--- a/services/screenService.js
+++ b/services/screenService.js
@@ -2,8 +2,22 @@
 import Vue from 'vue'
 let axiosApi = null

+let regionCode = ''
+
 //根据外部传入的ctx对象，赋值给本地serve文件
-const handleScreenData = async (app) => {
+const handleScreenData = async (app,type = 2) => {
+
+  let areaCode = {
+    2:'430103000000', //天心区
+    3:'430104000000', //岳麓区
+    4:'430102000000', //芙蓉区
+    5:'430111000000', //雨花区
+    6:'430105000000',  //开福区
+    7:'430181000000', //浏阳市
+    // 8:'430106000000',  //高新区
+  }
+  regionCode = areaCode[type] || '430104000000'
+
  axiosApi = app.$axiosApi

  let banner = await queryVideoBanner()
@@ -39,12 +53,12 @@ const handleScreenData = async (app) => {

 //中间banner图
 const queryVideoBanner= async () =>{
-  return await axiosApi('/sport/new/screen/getMidUrl',{regionCode:430103000000},{})
+  return await axiosApi('/sport/new/screen/getMidUrl',{regionCode:regionCode},{})
 }

 //年级分布
 const queryYearList = async ()=>{
-  return await axiosApi('/sport/new/screen/getGradeJoinList',{regionCode:430103000000},{}).then(res =>{
+  return await axiosApi('/sport/new/screen/getGradeJoinList',{regionCode:regionCode},{}).then(res =>{
    //配置颜色
    const color = ['#3597FF','#4EC9E1','#1BD861','#1BD861','#F19466','#3597FF','#4EC9E1','#1BD861','#F19466','#3597FF']
    let option = []
@@ -65,21 +79,21 @@ const queryYearList = async ()=>{

 //学校TOP10排行
 const getSchoolSpeedTopList = async ()=>{
-  return await axiosApi('/sport/new/screen/getSchoolSpeedTopList',{regionCode:430103000000},{})
+  return await axiosApi('/sport/new/screen/getSchoolSpeedTopList',{regionCode:regionCode},{})
 }

 //学生TOP20排行
 const getStudentSpeedTopList= async ()=> {
-  return await axiosApi('/sport/new/screen/getStudentSpeedTopList',{regionCode:430103000000},{})
+  return await axiosApi('/sport/new/screen/getStudentSpeedTopList',{regionCode:regionCode},{})
 }

 //学生运动参与总览
 const getSportSchoolSum = async () => {
-  return await axiosApi('/sport/new/screen/getSportSchoolSum',{regionCode:430103000000},{})
+  return await axiosApi('/sport/new/screen/getSportSchoolSum',{regionCode:regionCode},{})
 }
 //云赛PK 设备数据
 const queryStatistics = async ()=>{
-  return await axiosApi('/sport/new/screen/statistics',{regionCode:430103000000},{}).then(res =>{
+  return await axiosApi('/sport/new/screen/statistics',{regionCode:regionCode},{}).then(res =>{
    let _list = [...(res.detailList || []),...(res.roomList || [])]
    res._list = _list
    return res
@@ -89,7 +103,7 @@ const queryStatistics = async ()=>{
 //学校平均参与率
 const querySchoolJoin =async (dateType,studyStep)=>{
  return await axiosApi("/sport/new/screen/getSchoolAvgJoinRate", {
-    regionCode:430103000000,dateType,studyStep
+    regionCode:regionCode,dateType,studyStep
  })
 }


--- a/ssr/screen.js
+++ b/ssr/screen.js
-import container from '../pages/screen';
+/*
+ * @Author: tangjiale
+ * @eMail: 932055106@qq.com
+ * @Date: 2022-09-28 15:35:02
+ * @LastEditors: tangjiale
+ * @LastEditTime: 2022-09-28 15:47:42
+ */
+import container from '~/pages/screen'

 container.head = function() {
-
+  const titleList = ['','','天心区','岳麓区','芙蓉区','雨花区','开福区','浏阳市']
  return {
-    title: `岳麓区数据大屏`,
+    title: `${titleList[this.type]}智慧体育监测平台`,
    meta: [
      {
        hid: 'description',
        name: 'description',
-        content: '测试测试多url指向同一页面'
+        content: `${titleList[this.type]}智慧体育监测平台`,
      },
      {
        name: 'keywords',
-        content: '测试测试多url指向同一页面'
+        content: `${titleList[this.type]}智慧体育监测平台`,
      }
    ],
    link: [],

--- a/ssr/tired/_id.js
+++ b/ssr/tired/_id.js
-import container from '../../pages/test';
-
-container.head = function() {
-
-  return {
-    title: `${this.ip[0]} - 小本体育`,
-    meta: [
-      {
-        hid: 'description',
-        name: 'description',
-        content: '测试测试多url指向同一页面'
-      },
-      {
-        name: 'keywords',
-        content: '测试测试多url指向同一页面'
-      }
-    ],
-    link: [],
-  };
-};
-
-export default container;