Skip to content

S
ssr-pc
Commit 1567dbb6 by tangjiale
Options

更新代码

parent f318c0f7
Showing with 77 additions and 68 deletions
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基本满足各端业务需求。
......
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
})
// 响应拦截
......@@ -43,15 +46,18 @@ export default ({app:{ $axios, redirect, router, store}},inject) => {
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 deleted 100644 → 0
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;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment