Skip to content

M
myblogVue_django

yma16 / myblogVue_django

通知 5
Star 1
Fork 0
M
myblogVue_django
提交 b805e45a 编写于 作者: yma16's avatar yma16
浏览文件
操作

perf:按需引入element echarts

上级 d49fa0dc
展开全部 隐藏空白更改
内联 并排
Showing with 1395 addition and 1430 deletion
.babelrc
浏览文件 @ b805e45a
{ {
"presets": [ "presets": [
["env", { [
"modules": false, "env",
"targets": { {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"] "modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
} }
}], ],
"stage-2" "stage-2"
], ],
"plugins": ["transform-vue-jsx", "transform-runtime"], "plugins": [
"transform-vue-jsx",
"transform-runtime",
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
],
"env": { "env": {
"test": { "test": {
"presets": ["env", "stage-2"] "presets": ["env", "stage-2"]
......
config/index.js
浏览文件 @ b805e45a
...@@ -11,7 +11,7 @@ module.exports = { ...@@ -11,7 +11,7 @@ module.exports = {
assetsPublicPath: "/", assetsPublicPath: "/",
proxyTable: { proxyTable: {
"/api/": { "/api/": {
target: "http://yongma16.xyz/", //后端接口地址 target: "https://yongma16.xyz/", //后端接口地址
ws: true, //接受websocket请求 ws: true, //接受websocket请求
changeOrigin: true, //是否允许跨越 changeOrigin: true, //是否允许跨越
chunkOrigins: true, chunkOrigins: true,
...@@ -20,7 +20,7 @@ module.exports = { ...@@ -20,7 +20,7 @@ module.exports = {
}, },
}, },
"/ws_api/": { "/ws_api/": {
target: "ws://yongma16.xyz/ws/webchat/", target: "wss://yongma16.xyz/ws/webchat/",
ws: true, //接受websocket请求 ws: true, //接受websocket请求
changeOrigin: true, //是否允许跨越 changeOrigin: true, //是否允许跨越
chunkOrigins: true, chunkOrigins: true,
...@@ -58,7 +58,7 @@ module.exports = { ...@@ -58,7 +58,7 @@ module.exports = {
// https://vue-loader.vuejs.org/en/options.html#cachebusting // https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true, cacheBusting: true,
cssSourceMap: true, cssSourceMap: false,
}, },
build: { build: {
...@@ -74,7 +74,7 @@ module.exports = { ...@@ -74,7 +74,7 @@ module.exports = {
* Source Maps * Source Maps
*/ */
productionSourceMap: true, productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production // https://webpack.js.org/configuration/devtool/#production
devtool: "#source-map", devtool: "#source-map",
......
index.html
浏览文件 @ b805e45a
...@@ -14,8 +14,7 @@ ...@@ -14,8 +14,7 @@
rel="stylesheet" rel="stylesheet"
href="myblog_static/utils/fx_background/css/core.css" href="myblog_static/utils/fx_background/css/core.css"
/> />
<!-- 我的阿里图标库 -->
<script src="http://at.alicdn.com/t/font_1957918_9kt1mmflyr8.js"></script>
<style> <style>
body { body {
background: url(myblog_static/utils/fx_background/image/background.png); background: url(myblog_static/utils/fx_background/image/background.png);
...@@ -43,35 +42,36 @@ ...@@ -43,35 +42,36 @@
<div id="is"></div> <div id="is"></div>
<div id="beautiful"></div> <div id="beautiful"></div>
</div> </div>
<!-- built files will be auto injected -->
<!-- <script src="myblog_static/utils/fx_background/js/jquery-2.1.4.min.js"></script>-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
model: {
jsonPath:
"https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json",
scale: 1,
hHeadPos: 0.5,
vHeadPos: 0.618,
},
display: {
position: "left",
width: 50,
height: 60,
hOffset: 0,
vOffset: 0,
},
mobile: {
show: true,
scale: 0.5,
},
react: {
opacityDefault: 0.9,
opacityOnHover: 0.5,
},
});
</script>
</body> </body>
<!-- built files will be auto injected -->
<!-- <script src="myblog_static/utils/fx_background/js/jquery-2.1.4.min.js"></script>-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<!-- 我的阿里图标库 -->
<script src="https://yongma16.xyz/static/aliyunIcon/icon.js"></script>
<script>
L2Dwidget.init({
model: {
jsonPath:
"https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json",
scale: 1,
hHeadPos: 0.5,
vHeadPos: 0.618,
},
display: {
position: "left",
width: 50,
height: 60,
hOffset: 0,
vOffset: 0,
},
mobile: {
show: true,
scale: 0.5,
},
react: {
opacityDefault: 0.9,
opacityOnHover: 0.5,
},
});
</script>
</html> </html>
src/App.vue
浏览文件 @ b805e45a
...@@ -134,161 +134,158 @@ ...@@ -134,161 +134,158 @@
</template> </template>
<script> <script>
import store from "@/store"; import store from '@/store'
export default { export default {
name: "App", name: 'App',
data() { data () {
return { return {
authSlogan: "yma16", authSlogan: 'yma16',
chat_flag: false, chat_flag: false,
msg: "yma16", msg: 'yma16',
navigate_flag: true, navigate_flag: true,
value: new Date(), value: new Date(),
baseUrl: "/api/", baseUrl: '/api/',
src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg", src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
url: "/image/logo/logo.jpg", url: '/image/logo/logo.jpg',
srcList: [ srcList: [
"https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg", 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
"https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg", 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
], ],
headerData: ["从现在开始，种一棵树", "从现在开始，种一棵树"], headerData: ['从现在开始，种一棵树', '从现在开始，种一棵树'],
readCount: 0, readCount: 0
}; }
},
computed: {
currentUserName: function () {
return store.state.user.userInfo && store.state.user.userInfo.name
? store.state.user.userInfo.name
: "游客";
}, },
}, computed: {
mounted() { currentUserName: function () {
this.addReadCountFun(); return store.state.user.userInfo && store.state.user.userInfo.name
this.readCountFun(); ? store.state.user.userInfo.name
}, : '游客'
methods: { }
jumpIpDns: function () {
try {
window.open("https://beian.miit.gov.cn");
} catch (r) {
window.location.href = "https://beian.miit.gov.cn";
throw Error(r);
}
}, },
addReadCountFun: function () { mounted () {
const that = this; this.addReadCountFun()
let clientIp = "未知"; this.readCountFun()
try {
console.warn("ip待定");
} catch (e) {
console.warn(e);
}
that.$axios
.post(this.baseUrl + "count/add/", {
ip: clientIp,
})
.then((res) => {
console.log(res);
})
.catch((e) => {
throw Error(e);
});
}, },
readCountFun: function () { methods: {
let that = this; jumpIpDns: function () {
that.$axios try {
.get(that.baseUrl + "count/get/") window.open('https://beian.miit.gov.cn')
.then((res) => { } catch (r) {
this.readCount = res.data.num; window.location.href = 'https://beian.miit.gov.cn'
}) throw Error(r)
.catch((error) => { }
console.log(error); },
}); addReadCountFun: function () {
}, const that = this
changeNavigate: function () { let clientIp = '未知'
this.navigate_flag = !this.navigate_flag; // 取反 try {
}, console.warn('ip待定')
} catch (e) {
handleOpen(key, keyPath) { console.warn(e)
console.log(key, keyPath); }
if (key === "3") { that.$axios
console.log("打开3号"); .post(this.baseUrl + 'count/add/', {
this.chat_flag = true; ip: clientIp
this.onlineWebsocket(); // 调用跳转 })
} .then((res) => {
if (key === "2-1") { console.log(res)
this.chat_flag = false; })
this.loginAction(); // 调用跳转 .catch((e) => {
} throw Error(e)
if (key === "2-2") { })
this.chat_flag = false; },
this.registerAction(); // 调用跳转 readCountFun: function () {
} let that = this
}, that.$axios
handleClose(key, keyPath) { .get(that.baseUrl + 'count/get/')
console.info(key, keyPath); .then((res) => {
if (key === "3") { this.readCount = res.data.num
this.chat_flag = false; })
} .catch((error) => {
}, throw Error(error)
jumpRouter: function (params) { })
this.$router },
.push({ changeNavigate: function () {
name: `${params}`, this.navigate_flag = !this.navigate_flag // 取反
}) },
.catch((error) => {
console.log(error); handleOpen (key, keyPath) {
}); console.log(key, keyPath)
}, if (key === '3') {
onlineWebsocket: function () { this.chat_flag = true
// console.log(this.$router); this.onlineWebsocket() // 调用跳转
this.$router }
.push({ if (key === '2-1') {
path: "/onlinewebsocket", this.chat_flag = false
}) this.loginAction() // 调用跳转
.catch((error) => { }
throw Error(error); if (key === '2-2') {
}); this.chat_flag = false
}, this.registerAction() // 调用跳转
jumpToEcharts: function () { }
// console.log(this.$router); },
this.$router handleClose (key, keyPath) {
.push({ console.info(key, keyPath)
path: "/bilicom", if (key === '3') {
}) this.chat_flag = false
.catch((error) => { }
console.log(error); },
}); jumpRouter: function (params) {
}, this.$router
jumpToAdmin: function () { .push({
this.$router name: `${params}`
.push({ })
path: "/mavoneditor", .catch((error) => {
}) throw Error(error)
.catch((error) => { })
console.log(error); },
}); onlineWebsocket: function () {
}, this.$router
loginAction: function () { .push({
this.$router path: '/onlinewebsocket'
.push({ })
path: "/login", .catch((error) => {
}) throw Error(error)
.catch((error) => { })
console.log(error); },
}); jumpToEcharts: function () {
}, this.$router
registerAction: function () { .push({
this.$router path: '/bilicom'
.push({ })
path: "/register", .catch((error) => {
}) throw Error(error)
.catch((error) => { })
console.log(error); },
}); jumpToAdmin: function () {
}, this.$router
}, .push({
}; path: '/mavoneditor'
})
.catch((error) => {
throw Error(error)
})
},
loginAction: function () {
this.$router
.push({
path: '/login'
})
.catch((error) => {
throw Error(error)
})
},
registerAction: function () {
this.$router
.push({
path: '/register'
})
.catch((error) => {
throw Error(error)
})
}
}
}
</script> </script>
<style> <style>
......
src/components/Article.vue
浏览文件 @ b805e45a
...@@ -213,7 +213,7 @@ ...@@ -213,7 +213,7 @@
</template> </template>
<script> <script>
import Email from '@/components/email/Email' import Email from '@/components/email/Email'
import VueMarkdown from "vue-markdown"; import VueMarkdown from "vue-markdown";
import ArticleComment from "@/comment/ArticleComment"; import ArticleComment from "@/comment/ArticleComment";
import EchartWeather from "@/weather/EchartWeather"; import EchartWeather from "@/weather/EchartWeather";
......
src/components/Bilicom.vue
浏览文件 @ b805e45a
...@@ -6,110 +6,112 @@ ...@@ -6,110 +6,112 @@
</template> </template>
<script> <script>
import * as echarts from 'echarts'
export default { export default {
name: 'Bilicom', name: 'Bilicom',
data () { data () {
return { return {
msg: '内容', msg: '内容',
md_data: [], md_data: [],
data: ['threejs加载模型'] data: ['threejs加载模型']
} }
}, },
methods: { methods: {
echartfunc: function () { echartfunc: function () {
// 基于准备好的dom，初始化echarts实例 // echarts
const myChart = echarts.init(document.getElementById('bilicom')) const echarts = this.$echarts
const option = { if (!echarts) return
backgroundColor: 'rgba(0, 0, 0, 0.3)', // 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('bilicom'))
const option = {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
title: { title: {
text: 'echarts', text: 'echarts',
left: 'center', left: 'center',
top: 20, top: 20,
textStyle: { textStyle: {
color: '#ccc' color: '#ccc'
} }
}, },
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
visualMap: { visualMap: {
show: false, show: false,
min: 80, min: 80,
max: 600, max: 600,
inRange: { inRange: {
colorLightness: [0, 1] colorLightness: [0, 1]
} }
}, },
series: [ series: [
{ {
name: '学习动力', name: '学习动力',
type: 'pie', type: 'pie',
radius: '55%', radius: '55%',
center: ['50%', '50%'], center: ['50%', '50%'],
data: [ data: [
{ value: 335, name: '反向素材' }, { value: 335, name: '反向素材' },
{ value: 310, name: '励志故事' }, { value: 310, name: '励志故事' },
{ value: 274, name: '心灵鸡汤' }, { value: 274, name: '心灵鸡汤' },
{ value: 235, name: '社会压力' }, { value: 235, name: '社会压力' },
{ value: 400, name: '发自内心' } { value: 400, name: '发自内心' }
].sort(function (a, b) { ].sort(function (a, b) {
return a.value - b.value return a.value - b.value
}), }),
roseType: 'radius', roseType: 'radius',
label: { label: {
color: 'rgba(255, 255, 255, 0.3)' color: 'rgba(255, 255, 255, 0.3)'
}, },
labelLine: { labelLine: {
lineStyle: { lineStyle: {
color: 'rgba(255, 255, 255, 0.3)' color: 'rgba(255, 255, 255, 0.3)'
}, },
smooth: 0.2, smooth: 0.2,
length: 10, length: 10,
length2: 20 length2: 20
}, },
itemStyle: { itemStyle: {
color: '#c23531', color: '#c23531',
shadowBlur: 200, shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)' shadowColor: 'rgba(0, 0, 0, 0.5)'
}, },
animationType: 'scale', animationType: 'scale',
animationEasing: 'elasticOut', animationEasing: 'elasticOut',
animationDelay: function (idx) { animationDelay: function (idx) {
return Math.random() * 200 return Math.random() * 200
}
}
]
} }
} myChart.setOption(option)
] }
} },
myChart.setOption(option) created: function () {
} const that = this
}, try {
created: function () { that.echartfunc()
const that = this window.onload = that.echartfunc
try { } catch (e) {
that.echartfunc() console.log(e)
window.onload = that.echartfunc } finally {
} catch (e) { that.echartfunc()
console.log(e) }
} finally { },
that.echartfunc() mounted () {
} let that = this
}, try {
mounted () { that.echartfunc()
let that = this window.onload = that.echartfunc
try { } catch (e) {
that.echartfunc() console.log(e)
window.onload = that.echartfunc } finally {
} catch (e) { that.echartfunc()
console.log(e) }
} finally {
that.echartfunc()
} }
}
} }
</script> </script>
......
src/components/Loading.vue 已删除 100644 → 0
浏览文件 @ d49fa0dc
<template>
<div id="loading">
<canvas id="fbxload" style="width: 100%; height: 100%"> </canvas>
</div>
</template>
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
// threejs引入
export default {
name: 'Loading',
data () {
return {
msg: 'fbxloading'
}
},
methods: {
loadingFbx: function () {
const scene = new THREE.Scene()
const width = window.innerWidth
const height = window.innerHeight
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 100)
const canvas = document.querySelector('#fbxload') // 根据canvas的id获取dom节点
console.log(canvas)
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true }) // 渲染场景
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
controls.update()
camera.position.z = 5
// const geometry = new THREE.BoxGeometry();
// const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// const cube = new THREE.Mesh(geometry, material);
const light = new THREE.AmbientLight(0x0000ff) // 蓝色环境环境光
scene.add(light)
// scene.add(cube);
const gltfLoader = new GLTFLoader()
gltfLoader.load(
'/myblog_static/utils/fx_background/model/glb/snow.glb',
function (gltf) {
console.log(gltf)
scene.add(gltf.scene)
},
undefined,
function (error) {
console.error(error)
}
)
function animate () {
// 渲染
renderer.render(scene, camera)
requestAnimationFrame(animate)
}
animate()
}
},
created () {
window.onload = this.loadingFbx // dom加载完再执行
}
}
</script>
<style scoped>
#loading {
width: 100%;
height: 100%;
line-height: 1em;
}
#fbxload {
width: 100%;
height: 100%;
}
</style>
src/components/Login.vue
浏览文件 @ b805e45a
...@@ -61,7 +61,7 @@ export default { ...@@ -61,7 +61,7 @@ export default {
} }
const validatePass = (rule, value, callback) => { const validatePass = (rule, value, callback) => {
if (value === '') { if (value === '') {
callback(new Error('请输入密码')) callback(new Error('密码不能为空'))
} else { } else {
callback() callback()
} }
......
src/components/Onlinewebsocket.vue
浏览文件 @ b805e45a
此差异已折叠。
src/components/Register.vue
浏览文件 @ b805e45a
...@@ -77,114 +77,114 @@ ...@@ -77,114 +77,114 @@
</template> </template>
<script> <script>
import axios from "axios"; import axios from 'axios'
export default { export default {
name: "Register", name: 'Register',
data() { data () {
const checkName = (rule, value, callback) => { const checkName = (rule, value, callback) => {
if (!value) { if (!value) {
return callback(new Error("账号不能为空")); return callback(new Error('账号不能为空'))
} }
setTimeout(() => { setTimeout(() => {
// if (!Number.isInteger(value)) { // if (!Number.isInteger(value)) {
// callback(new Error('请输入密码')); // callback(new Error('请输入密码'));
// } if { // } if {
if (value.length < 2) { if (value.length < 2) {
callback(new Error("名字至少两位")); callback(new Error('名字至少两位'))
} else { } else {
callback(); callback()
}
}, 1000)
} }
}, 1000); const validatePass = (rule, value, callback) => {
}; if (value === '') {
const validatePass = (rule, value, callback) => { callback(new Error('密码不能为空'))
if (value === "") { } else {
callback(new Error("请输入密码")); if (this.ruleForm.checkPass !== '') {
} else { this.$refs.ruleForm.validateField('checkPass')
if (this.ruleForm.checkPass !== "") { }
this.$refs.ruleForm.validateField("checkPass"); callback()
}
} }
callback(); const validatePass2 = (rule, value, callback) => {
} if (value === '') {
}; callback(new Error('请确认密码'))
const validatePass2 = (rule, value, callback) => { } else if (value !== this.ruleForm.pass) {
if (value === "") { callback(new Error('密码不一致!'))
callback(new Error("请再次输入密码")); } else {
} else if (value !== this.ruleForm.pass) { callback()
callback(new Error("两次输入密码不一致!")); }
} else { }
callback(); return {
} loading: false,
}; register_success: false,
return { register_error: false,
loading:false, // baseurl: "http://127.0.0.1/",
register_success: false, baseurl: '/api/',
register_error: false, // baseurl: 'http://yongma16.xyz/',
// baseurl: "http://127.0.0.1/", ruleForm: {
baseurl: "/api/", pass: '',
// baseurl: 'http://yongma16.xyz/', checkPass: '',
ruleForm: { name: ''
pass: "", },
checkPass: "", rules: {
name: "", pass: [{ validator: validatePass, trigger: 'blur' }],
}, checkPass: [{ validator: validatePass2, trigger: 'blur' }],
rules: { name: [{ validator: checkName, trigger: 'blur' }]
pass: [{ validator: validatePass, trigger: "blur" }], }
checkPass: [{ validator: validatePass2, trigger: "blur" }],
name: [{ validator: checkName, trigger: "blur" }],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
const that = this;
if (valid) {
that.loading=false
// 提交数据
// alert("yes submit!");
that.register_success = false; // 初始化register的状态
that.register_error = false;
axios
.post(that.baseurl + "user/register/", {
// 传递的名字和密码
name: that.ruleForm.name,
password: that.ruleForm.pass,
})
.then(function (res) {
if (res.data.code === 0) {
document.cookie = `user=${that.ruleForm.name}`;
that.register_error = true;
that.$message({
message: "名称重复" + that.ruleForm.name + "!",
type: "error",
});
} else {
that.register_success = true;
that.$message({
message: "注册成功，欢迎您，" + that.ruleForm.name + "!",
type: "success",
});
}
that.loading=false
})
.catch(function (res) {
// 获取res中的name
that.loading=false
that.$message({
message: "注册失败" + that.ruleForm.name + "!",
type: "error",
});
});
} else {
return false;
} }
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}, },
}, methods: {
}; submitForm (formName) {
this.$refs[formName].validate((valid) => {
const that = this
if (valid) {
that.loading = false
// 提交数据
// alert("yes submit!");
that.register_success = false // 初始化register的状态
that.register_error = false
axios
.post(that.baseurl + 'user/register/', {
// 传递的名字和密码
name: that.ruleForm.name,
password: that.ruleForm.pass
})
.then(function (res) {
if (res.data.code === 0) {
document.cookie = `user=${that.ruleForm.name}`
that.register_error = true
that.$message({
message: '名称重复' + that.ruleForm.name + '!',
type: 'error'
})
} else {
that.register_success = true
that.$message({
message: '注册成功，欢迎您，' + that.ruleForm.name + '!',
type: 'success'
})
}
that.loading = false
})
.catch(function (res) {
// 获取res中的name
that.loading = false
that.$message({
message: '注册失败' + that.ruleForm.name + '!',
type: 'error'
})
})
} else {
return false
}
})
},
resetForm (formName) {
this.$refs[formName].resetFields()
}
}
}
</script> </script>
<style scoped> <style scoped>
......
src/echarts/Map.vue
浏览文件 @ b805e45a
此差异已折叠。
src/importEchartsComponents.js 0 → 100644
浏览文件 @ b805e45a
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, LineChart, MapChart, GraphChart, PieChart} from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent
} from 'echarts/components'
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
import Vue from 'vue'
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
BarChart,
LineChart,
MapChart,
GraphChart,
PieChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
])
const importEchartsComponents = () => {
Vue.prototype.$echarts = echarts// 绑定echarts
}
export default importEchartsComponents
src/importElement.js 0 → 100644
浏览文件 @ b805e45a
import Vue from 'vue'
import {
Container,
Header,
Aside,
Main,
Footer,
Message,
Form,
Button,
Table,
TableColumn,
Drawer,
Input,
Card,
Menu,
Submenu,
MenuItem,
MenuItemGroup,
FormItem,
Avatar,
Link,
Notification,
Loading
} from 'element-ui'
const importElementComponents = () => {
Vue.use(Container)
Vue.use(Header)
Vue.use(Main)
Vue.use(Aside)
Vue.use(Footer)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Button)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Drawer)
Vue.use(Input)
Vue.use(Card)
Vue.use(MenuItem)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(Avatar)
Vue.use(Link)
Vue.use(Notification)
Vue.use(Loading)
Vue.prototype.$message = Message
Vue.prototype.$notify = Notification
}
export default importElementComponents
src/main.js
浏览文件 @ b805e45a
...@@ -3,18 +3,23 @@ ...@@ -3,18 +3,23 @@
import Vue from 'vue' import Vue from 'vue'
import './plugins/axios' import './plugins/axios'
import App from './App' import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' import 'element-ui/lib/theme-chalk/index.css'
import cookies from 'vue-cookies' import cookies from 'vue-cookies'
import 'github-markdown-css/github-markdown.css' import 'github-markdown-css/github-markdown.css'
import hljs from 'highlight.js' import hljs from 'highlight.js'
import 'highlight.js/styles/github.css' import 'highlight.js/styles/github.css'
import * as echarts from 'echarts'
import router from './router' import router from './router'
import importElementComponents from './importElement'
import importEchartsComponents from './importEchartsComponents'
// 按需引入elementui
importElementComponents()
//按需引入echarts
importEchartsComponents()
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.prototype.$echarts = echarts
Vue.use(ElementUI)
Vue.use(cookies) Vue.use(cookies)
// Vue.use(hljs) // Vue.use(hljs)
...@@ -27,15 +32,12 @@ Vue.directive('highlight', function(el) { ...@@ -27,15 +32,12 @@ Vue.directive('highlight', function(el) {
// Vue.prototype.http = axios; // Vue.prototype.http = axios;
Vue.prototype.$cookies = cookies Vue.prototype.$cookies = cookies
// 添加cookies的生命周期
console.log(Vue.prototype.$cookies)
Vue.prototype.$cookies.set("user_session", "null")
console.log('测试', Vue.prototype.$cookies) Vue.prototype.$cookies.set("user_session", "null")
new Vue({ new Vue({
el: '#app', el: '#app',
router, router,
components: { App }, components: { App },
template: '<App/>' template: '<App/>'
}) })
\ No newline at end of file
src/router/index.js
浏览文件 @ b805e45a
import Vue from "vue"; import Vue from 'vue'
import Nprogress from "nprogress"; import Nprogress from 'nprogress'
import "nprogress/nprogress.css"; import 'nprogress/nprogress.css'
import { getToken } from "@/utils/auth"; // import { getToken } from '@/utils/auth'
import { isEmpty } from "@/utils"; import { isEmpty } from '@/utils'
import VueRouter from "vue-router"; import VueRouter from 'vue-router'
// import Router from 'vue-router' // import Router from 'vue-router'
import store from "@/store"; import store from '@/store'
// store // store
import Article from "@/components/Article"; import Article from '@/components/Article'
import Login from "@/components/Login"; import Login from '@/components/Login'
import Register from "@/components/Register"; import Register from '@/components/Register'
import Onlinewebsocket from "@/components/Onlinewebsocket"; import Onlinewebsocket from '@/components/Onlinewebsocket'
import Home from "@/components/Home"; import Home from '@/components/Home'
import Bilicom from "@/components/Bilicom"; import Bilicom from '@/components/Bilicom'
import Mavoneditor from "@/components/Mavoneditor"; import Mavoneditor from '@/components/Mavoneditor'
import Loading from "@/components/Loading";
import GrilShow from "@/components/GrilShow"; import GrilShow from '@/components/GrilShow'
import Csslearn from "@/components/Csslearn"; import Csslearn from '@/components/Csslearn'
Vue.use(VueRouter); Vue.use(VueRouter)
const defaultRoutes = [ const defaultRoutes = [
{ {
path: "/", path: '/',
name: "Article", name: 'Article',
component: Article, component: Article
}, },
{ {
path: "/login", path: '/login',
name: "Login", name: 'Login',
component: Login, component: Login
}, },
{ {
path: "/register", path: '/register',
name: "Register", name: 'Register',
component: Register, component: Register
}, },
{ {
path: "/home", path: '/home',
name: "Home", name: 'Home',
component: Home, component: Home
}, },
{ {
path: "/onlinewebsocket", path: '/onlinewebsocket',
name: "Onlinewebsocket", name: 'Onlinewebsocket',
component: Onlinewebsocket, component: Onlinewebsocket
}, },
{ {
path: "/bilicom", path: '/bilicom',
name: "Bilicom", name: 'Bilicom',
component: Bilicom, component: Bilicom
}, },
{ {
path: "/mavoneditor", path: '/mavoneditor',
name: "Mavoneditor", name: 'Mavoneditor',
component: Mavoneditor, component: Mavoneditor
}, },
{ {
path: "/loading", path: '/gril',
name: "loading", name: 'grilshow',
component: Loading, component: GrilShow
}, },
{ {
path: "/gril", path: '/css',
name: "grilshow", name: 'css',
component: GrilShow, component: Csslearn
}, }
{ ]
path: "/css",
name: "css",
component: Csslearn,
},
// {
// path: '/register',
// name: 'Register',
// component: () =>
// import ('../components/Register.vue')
// },
// {
// path: '/home',
// name: 'Home',
// component: () =>
// import ('../components/Home.vue')
// },
// {
// path: '/onlinewebsocket',
// name: 'Onlinewebsocket',
// component: () =>
// import ('../components/Onlinewebsocket.vue')
// },
// {
// path: '/mavoneditor',
// name: 'Mavoneditor',
// component: () =>
// import ('../components/Mavoneditor.vue')
// },
// {
// path: '/bilicom',
// name: 'Bilicom',
// component: () =>
// import ('../components/Bilicom.vue')
// }
];
let routes = [ let routes = [
...defaultRoutes, ...defaultRoutes
// ...modulesRoutes, // ...modulesRoutes,
// ...errorRoutes, // ...errorRoutes,
// ...dashboardRouters // ...dashboardRouters
]; ]
const originalPush = VueRouter.prototype.push; const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) { VueRouter.prototype.push = function push (location) {
return originalPush.call(this, location).catch((err) => err); return originalPush.call(this, location).catch((err) => err)
}; }
const router = new VueRouter({ const router = new VueRouter({
routes, routes
}); })
const whiteList = ["/login", "/register"]; // const whiteList = ['/login', '/register']
router.beforeEach(async (to, from, next) => { router.beforeEach(async (to, from, next) => {
next(); next()
let yma16siteUserInfo = localStorage.getItem("yma16siteUserInfo") let yma16siteUserInfo = localStorage.getItem('yma16siteUserInfo')
? JSON.parse(localStorage.getItem("yma16siteUserInfo")) ? JSON.parse(localStorage.getItem('yma16siteUserInfo'))
: ""; : ''
let name = yma16siteUserInfo.username, let name = yma16siteUserInfo.username
pwd = yma16siteUserInfo.password; let pwd = yma16siteUserInfo.password
let hasToken = { let hasToken = {
name: name, name: name,
password: pwd, password: pwd
};
console.log("localStorage", hasToken);
if (hasToken.name && hasToken.password) {
if (isEmpty(store.state.user.userInfo)) {
// 空的 modules下的user
console.log("路由的登录认证");
// 用户自主登录
await store.dispatch("user/loginUserInfo", hasToken);
next();
} else {
next();
} }
} else { console.log('localStorage', hasToken)
if (hasToken.name && hasToken.password) {
if (isEmpty(store.state.user.userInfo)) {
// 空的 modules下的user
console.log('路由的登录认证')
// 用户自主登录
await store.dispatch('user/loginUserInfo', hasToken)
next()
} else {
next()
}
} else {
// next({ path: "/login" }); //去登录 // next({ path: "/login" }); //去登录
next(); next()
} }
}); })
router.afterEach((to, from) => { router.afterEach((to, from) => {
Nprogress.done(); Nprogress.done()
}); })
export default router; export default router
src/weather/EchartWeather.vue
浏览文件 @ b805e45a
...@@ -15,227 +15,227 @@ ...@@ -15,227 +15,227 @@
</template> </template>
<script> <script>
import axios from "axios"; import axios from 'axios'
import * as echarts from "echarts";
export default { export default {
name: "EchartWeather", name: 'EchartWeather',
data() { data () {
return { return {
msg: "贵阳天气", msg: '贵阳天气',
baseurl: "/api/", baseurl: '/api/',
// baseurl: 'http://yongma16.xyz/', // baseurl: 'http://yongma16.xyz/',
// baseurl: 'api/article/weather/', // baseurl: 'api/article/weather/',
tabPosition: "left", tabPosition: 'left',
weather_title: [], weather_title: [],
weather_high: [], weather_high: [],
weather_low: [], weather_low: [],
weather_discribe: [], weather_discribe: [],
weather_windem: [], weather_windem: [],
weather_windwl: [], weather_windwl: [],
tableData: [], tableData: []
}; }
},
mounted() {
this.initWeatherLine();
},
methods: {
initWeatherLine() {
let that = this;
async function waitGetWeatherData() {
await that.getWeatherData();
await that.weatherInint();
}
waitGetWeatherData().then((o) => {
console.log(o);
}); // 同步
}, },
getWeatherData() { mounted () {
let that = this; this.initWeatherLine()
return new Promise((resolve) => {
setTimeout(function () {
axios
.get(that.baseurl + "article/weather/")
.then((res) => {
console.log("天气接口返回", res);
let resdata = res.data;
let weather = resdata.weather;
let title = weather.title;
let high = weather.high;
let low = weather.low;
let discribe = weather.discribe;
let windem = weather.windem;
let windwl = weather.windwl;
that.tableData = [];
title.map((item) => {
that.weather_title.push(item);
});
high.map((o) => {
let temp = parseInt(o);
that.weather_high.push(temp);
});
low.map((o) => {
let temp = parseInt(o);
that.weather_low.push(temp);
});
that.weather_windem = Array.from(...[windem]);
that.weather_windwl = Array.from(...[windwl]);
discribe.map((item) => {
that.weather_discribe.push(item);
});
let weatherLength = title.length;
for (let loc = 0; loc < weatherLength; ++loc) {
let discribeText = {
date: "",
discrible: "",
temperature: "",
};
discribeText.date = that.weather_title[loc];
discribeText.discrible = that.weather_discribe[loc];
discribeText.temperature =
that.weather_low[loc] + "/" + that.weather_high[loc] + "°C";
discribeText.windem = that.weather_windem[loc];
discribeText.windwl = that.weather_windwl[loc];
that.tableData.push(discribeText);
}
console.log(that.tableData, "that.tableData");
})
.catch((r) => {
console.log("r", r);
});
}, 1000);
resolve("获取后端天气成功的promise");
});
}, },
weatherInint() { methods: {
// 基于准备好的dom，初始化echarts实例 initWeatherLine () {
console.log("echarts!"); let that = this
var that = this; // 传递 async function waitGetWeatherData () {
return new Promise((resolve) => { await that.getWeatherData()
setTimeout(function () { await that.weatherInint()
let highData = Array.from(...[that.weather_high]); }
let lowData = Array.from(...[that.weather_low]); waitGetWeatherData().then((o) => {
let titleData = Array.from(...[that.weather_title]); console.log(o)
console.log("绘制折线图数据", titleData, highData, lowData); }) // 同步
var dom = document.getElementById("echart_weather"); },
// console.log('dom', dom) getWeatherData () {
var myChart = echarts.init(dom); let that = this
// 绘制图表 return new Promise((resolve) => {
var option = { setTimeout(function () {
title: { axios
text: that.msg, .get(that.baseurl + 'article/weather/')
subtext: "气温°C", .then((res) => {
}, console.log('天气接口返回', res)
tooltip: { let resdata = res.data
trigger: "axis", let weather = resdata.weather
}, let title = weather.title
// legend: { let high = weather.high
// data: ['最高', '最低'] let low = weather.low
// }, let discribe = weather.discribe
toolbox: { let windem = weather.windem
show: true, let windwl = weather.windwl
feature: { that.tableData = []
dataZoom: { title.map((item) => {
yAxisIndex: "none", that.weather_title.push(item)
}, })
dataView: { high.map((o) => {
readOnly: false, let temp = parseInt(o)
}, that.weather_high.push(temp)
magicType: { })
type: ["bar", "line"], low.map((o) => {
}, let temp = parseInt(o)
restore: {}, that.weather_low.push(temp)
saveAsImage: {}, })
}, that.weather_windem = Array.from(...[windem])
}, that.weather_windwl = Array.from(...[windwl])
xAxis: { discribe.map((item) => {
type: "category", that.weather_discribe.push(item)
boundaryGap: true, })
data: titleData, let weatherLength = title.length
}, for (let loc = 0; loc < weatherLength; ++loc) {
yAxis: { let discribeText = {
type: "value", date: '',
axisLabel: { discrible: '',
formatter: "{value}", temperature: ''
}, }
}, discribeText.date = that.weather_title[loc]
series: [ discribeText.discrible = that.weather_discribe[loc]
{ discribeText.temperature =
name: "Highest", that.weather_low[loc] + '/' + that.weather_high[loc] + '°C'
type: "bar", discribeText.windem = that.weather_windem[loc]
data: highData, discribeText.windwl = that.weather_windwl[loc]
markPoint: { that.tableData.push(discribeText)
data: [ }
{ console.log(that.tableData, 'that.tableData')
type: "max", })
name: "Max", .catch((r) => {
}, console.log('r', r)
{ })
type: "min", }, 1000)
name: "Min", resolve('获取后端天气成功的promise')
}, })
], },
}, weatherInint () {
markLine: { // 基于准备好的dom，初始化echarts实例
data: [ const echarts = this.$echarts
{ if (!echarts) return
type: "average", const that = this // 传递
name: "avg", return new Promise((resolve) => {
}, setTimeout(function () {
], let highData = Array.from(...[that.weather_high])
}, let lowData = Array.from(...[that.weather_low])
}, let titleData = Array.from(...[that.weather_title])
{ console.log('绘制折线图数据', titleData, highData, lowData)
name: "Lowest", let dom = document.getElementById('echart_weather')
type: "line", // console.log('dom', dom)
data: lowData, let myChart = echarts.init(dom)
markPoint: { // 绘制图表
data: [ let option = {
{ title: {
name: "最低", text: that.msg,
value: -2, subtext: '气温°C'
xAxis: 1,
yAxis: -1.5,
},
],
},
markLine: {
data: [
{
type: "average",
name: "Avg",
},
[
{
symbol: "circle",
x: "75%",
yAxis: "max",
},
{
symbol: "circle",
label: {
position: "start",
formatter: "Max",
}, },
type: "max", tooltip: {
name: "最高点", trigger: 'axis'
}, },
], // legend: {
], // data: ['最高', '最低']
}, // },
}, toolbox: {
], show: true,
}; feature: {
myChart.setOption(option); // 画折线图 dataZoom: {
window.onresize = function () { yAxisIndex: 'none'
myChart.resize(); },
}; dataView: {
}, 3000); readOnly: false
resolve("绘制折线图Promise"); },
}); magicType: {
// dom = null; //销毁 type: ['bar', 'line']
}, },
}, restore: {},
}; saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: true,
data: titleData
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}'
}
},
series: [
{
name: 'Highest',
type: 'bar',
data: highData,
markPoint: {
data: [
{
type: 'max',
name: 'Max'
},
{
type: 'min',
name: 'Min'
}
]
},
markLine: {
data: [
{
type: 'average',
name: 'avg'
}
]
}
},
{
name: 'Lowest',
type: 'line',
data: lowData,
markPoint: {
data: [
{
name: '最低',
value: -2,
xAxis: 1,
yAxis: -1.5
}
]
},
markLine: {
data: [
{
type: 'average',
name: 'Avg'
},
[
{
symbol: 'circle',
x: '75%',
yAxis: 'max'
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: 'Max'
},
type: 'max',
name: '最高点'
}
]
]
}
}
]
}
myChart.setOption(option) // 画折线图
window.onresize = function () {
myChart.resize()
}
}, 3000)
resolve('绘制折线图Promise')
})
// dom = null; //销毁
}
}
}
</script> </script>
<style scoped> <style scoped>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或