更新代码

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信息 给不同的页面
+  (3) 可以根据 id 数据的不同 配置动态的seo信息 给不同的页面
\ No newline at end of file

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: {

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(){
 

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

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

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

ssr/screen.js → ssr/csScreen/_type.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: [],

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;