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": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
[
"env",
{
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}
}],
],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"],
"plugins": [
"transform-vue-jsx",
"transform-runtime",
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
],
"env": {
"test": {
"presets": ["env", "stage-2"]
......
config/index.js
浏览文件 @ b805e45a
......@@ -11,7 +11,7 @@ module.exports = {
assetsPublicPath: "/",
proxyTable: {
"/api/": {
target: "http://yongma16.xyz/", //后端接口地址
target: "https://yongma16.xyz/", //后端接口地址
ws: true, //接受websocket请求
changeOrigin: true, //是否允许跨越
chunkOrigins: true,
......@@ -20,7 +20,7 @@ module.exports = {
},
},
"/ws_api/": {
target: "ws://yongma16.xyz/ws/webchat/",
target: "wss://yongma16.xyz/ws/webchat/",
ws: true, //接受websocket请求
changeOrigin: true, //是否允许跨越
chunkOrigins: true,
......@@ -58,7 +58,7 @@ module.exports = {
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true,
cssSourceMap: false,
},
build: {
......@@ -74,7 +74,7 @@ module.exports = {
* Source Maps
*/
productionSourceMap: true,
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: "#source-map",
......
index.html
浏览文件 @ b805e45a
......@@ -14,8 +14,7 @@
rel="stylesheet"
href="myblog_static/utils/fx_background/css/core.css"
/>
<!-- 我的阿里图标库 -->
<script src="http://at.alicdn.com/t/font_1957918_9kt1mmflyr8.js"></script>
<style>
body {
background: url(myblog_static/utils/fx_background/image/background.png);
......@@ -43,35 +42,36 @@
<div id="is"></div>
<div id="beautiful"></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>
<!-- 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>
src/App.vue
浏览文件 @ b805e45a
......@@ -134,161 +134,158 @@
</template>
<script>
import store from "@/store";
import store from '@/store'
export default {
name: "App",
data() {
return {
authSlogan: "yma16",
chat_flag: false,
msg: "yma16",
navigate_flag: true,
value: new Date(),
baseUrl: "/api/",
src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
url: "/image/logo/logo.jpg",
srcList: [
"https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
"https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
],
headerData: ["从现在开始，种一棵树", "从现在开始，种一棵树"],
readCount: 0,
};
},
computed: {
currentUserName: function () {
return store.state.user.userInfo && store.state.user.userInfo.name
? store.state.user.userInfo.name
: "游客";
name: 'App',
data () {
return {
authSlogan: 'yma16',
chat_flag: false,
msg: 'yma16',
navigate_flag: true,
value: new Date(),
baseUrl: '/api/',
src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
url: '/image/logo/logo.jpg',
srcList: [
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
],
headerData: ['从现在开始，种一棵树', '从现在开始，种一棵树'],
readCount: 0
}
},
},
mounted() {
this.addReadCountFun();
this.readCountFun();
},
methods: {
jumpIpDns: function () {
try {
window.open("https://beian.miit.gov.cn");
} catch (r) {
window.location.href = "https://beian.miit.gov.cn";
throw Error(r);
}
computed: {
currentUserName: function () {
return store.state.user.userInfo && store.state.user.userInfo.name
? store.state.user.userInfo.name
: '游客'
}
},
addReadCountFun: function () {
const that = this;
let clientIp = "未知";
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);
});
mounted () {
this.addReadCountFun()
this.readCountFun()
},
readCountFun: function () {
let that = this;
that.$axios
.get(that.baseUrl + "count/get/")
.then((res) => {
this.readCount = res.data.num;
})
.catch((error) => {
console.log(error);
});
},
changeNavigate: function () {
this.navigate_flag = !this.navigate_flag; // 取反
},
handleOpen(key, keyPath) {
console.log(key, keyPath);
if (key === "3") {
console.log("打开3号");
this.chat_flag = true;
this.onlineWebsocket(); // 调用跳转
}
if (key === "2-1") {
this.chat_flag = false;
this.loginAction(); // 调用跳转
}
if (key === "2-2") {
this.chat_flag = false;
this.registerAction(); // 调用跳转
}
},
handleClose(key, keyPath) {
console.info(key, keyPath);
if (key === "3") {
this.chat_flag = false;
}
},
jumpRouter: function (params) {
this.$router
.push({
name: `${params}`,
})
.catch((error) => {
console.log(error);
});
},
onlineWebsocket: function () {
// console.log(this.$router);
this.$router
.push({
path: "/onlinewebsocket",
})
.catch((error) => {
throw Error(error);
});
},
jumpToEcharts: function () {
// console.log(this.$router);
this.$router
.push({
path: "/bilicom",
})
.catch((error) => {
console.log(error);
});
},
jumpToAdmin: function () {
this.$router
.push({
path: "/mavoneditor",
})
.catch((error) => {
console.log(error);
});
},
loginAction: function () {
this.$router
.push({
path: "/login",
})
.catch((error) => {
console.log(error);
});
},
registerAction: function () {
this.$router
.push({
path: "/register",
})
.catch((error) => {
console.log(error);
});
},
},
};
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 () {
const that = this
let clientIp = '未知'
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 () {
let that = this
that.$axios
.get(that.baseUrl + 'count/get/')
.then((res) => {
this.readCount = res.data.num
})
.catch((error) => {
throw Error(error)
})
},
changeNavigate: function () {
this.navigate_flag = !this.navigate_flag // 取反
},
handleOpen (key, keyPath) {
console.log(key, keyPath)
if (key === '3') {
this.chat_flag = true
this.onlineWebsocket() // 调用跳转
}
if (key === '2-1') {
this.chat_flag = false
this.loginAction() // 调用跳转
}
if (key === '2-2') {
this.chat_flag = false
this.registerAction() // 调用跳转
}
},
handleClose (key, keyPath) {
console.info(key, keyPath)
if (key === '3') {
this.chat_flag = false
}
},
jumpRouter: function (params) {
this.$router
.push({
name: `${params}`
})
.catch((error) => {
throw Error(error)
})
},
onlineWebsocket: function () {
this.$router
.push({
path: '/onlinewebsocket'
})
.catch((error) => {
throw Error(error)
})
},
jumpToEcharts: function () {
this.$router
.push({
path: '/bilicom'
})
.catch((error) => {
throw Error(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>
<style>
......
src/components/Article.vue
浏览文件 @ b805e45a
......@@ -213,7 +213,7 @@
</template>
<script>
import Email from '@/components/email/Email'
import Email from '@/components/email/Email'
import VueMarkdown from "vue-markdown";
import ArticleComment from "@/comment/ArticleComment";
import EchartWeather from "@/weather/EchartWeather";
......
src/components/Bilicom.vue
浏览文件 @ b805e45a
......@@ -6,110 +6,112 @@
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'Bilicom',
data () {
return {
msg: '内容',
md_data: [],
data: ['threejs加载模型']
}
},
methods: {
echartfunc: function () {
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('bilicom'))
const option = {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
name: 'Bilicom',
data () {
return {
msg: '内容',
md_data: [],
data: ['threejs加载模型']
}
},
methods: {
echartfunc: function () {
// echarts
const echarts = this.$echarts
if (!echarts) return
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('bilicom'))
const option = {
backgroundColor: 'rgba(0, 0, 0, 0.3)',
title: {
text: 'echarts',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
title: {
text: 'echarts',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item'
},
tooltip: {
trigger: 'item'
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: '学习动力',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{ value: 335, name: '反向素材' },
{ value: 310, name: '励志故事' },
{ value: 274, name: '心灵鸡汤' },
{ value: 235, name: '社会压力' },
{ value: 400, name: '发自内心' }
].sort(function (a, b) {
return a.value - b.value
}),
roseType: 'radius',
label: {
color: 'rgba(255, 255, 255, 0.3)'
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: '学习动力',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{ value: 335, name: '反向素材' },
{ value: 310, name: '励志故事' },
{ value: 274, name: '心灵鸡汤' },
{ value: 235, name: '社会压力' },
{ value: 400, name: '发自内心' }
].sort(function (a, b) {
return a.value - b.value
}),
roseType: 'radius',
label: {
color: 'rgba(255, 255, 255, 0.3)'
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200
}
}
]
}
}
]
}
myChart.setOption(option)
}
},
created: function () {
const that = this
try {
that.echartfunc()
window.onload = that.echartfunc
} catch (e) {
console.log(e)
} finally {
that.echartfunc()
}
},
mounted () {
let that = this
try {
that.echartfunc()
window.onload = that.echartfunc
} catch (e) {
console.log(e)
} finally {
that.echartfunc()
myChart.setOption(option)
}
},
created: function () {
const that = this
try {
that.echartfunc()
window.onload = that.echartfunc
} catch (e) {
console.log(e)
} finally {
that.echartfunc()
}
},
mounted () {
let that = this
try {
that.echartfunc()
window.onload = that.echartfunc
} catch (e) {
console.log(e)
} finally {
that.echartfunc()
}
}
}
}
</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 {
}
const validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'))
callback(new Error('密码不能为空'))
} else {
callback()
}
......
src/components/Onlinewebsocket.vue
浏览文件 @ b805e45a
此差异已折叠。
src/components/Register.vue
浏览文件 @ b805e45a
......@@ -77,114 +77,114 @@
</template>
<script>
import axios from "axios";
import axios from 'axios'
export default {
name: "Register",
data() {
const checkName = (rule, value, callback) => {
if (!value) {
return callback(new Error("账号不能为空"));
}
setTimeout(() => {
// if (!Number.isInteger(value)) {
// callback(new Error('请输入密码'));
// } if {
if (value.length < 2) {
callback(new Error("名字至少两位"));
} else {
callback();
name: 'Register',
data () {
const checkName = (rule, value, callback) => {
if (!value) {
return callback(new Error('账号不能为空'))
}
setTimeout(() => {
// if (!Number.isInteger(value)) {
// callback(new Error('请输入密码'));
// } if {
if (value.length < 2) {
callback(new Error('名字至少两位'))
} else {
callback()
}
}, 1000)
}
}, 1000);
};
const validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
} else {
if (this.ruleForm.checkPass !== "") {
this.$refs.ruleForm.validateField("checkPass");
const validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('密码不能为空'))
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass')
}
callback()
}
}
callback();
}
};
const validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.ruleForm.pass) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
};
return {
loading:false,
register_success: false,
register_error: false,
// baseurl: "http://127.0.0.1/",
baseurl: "/api/",
// baseurl: 'http://yongma16.xyz/',
ruleForm: {
pass: "",
checkPass: "",
name: "",
},
rules: {
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;
const validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请确认密码'))
} else if (value !== this.ruleForm.pass) {
callback(new Error('密码不一致!'))
} else {
callback()
}
}
return {
loading: false,
register_success: false,
register_error: false,
// baseurl: "http://127.0.0.1/",
baseurl: '/api/',
// baseurl: 'http://yongma16.xyz/',
ruleForm: {
pass: '',
checkPass: '',
name: ''
},
rules: {
pass: [{ validator: validatePass, trigger: 'blur' }],
checkPass: [{ validator: validatePass2, trigger: 'blur' }],
name: [{ validator: checkName, trigger: 'blur' }]
}
}
});
},
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>
<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 @@
import Vue from 'vue'
import './plugins/axios'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import cookies from 'vue-cookies'
import 'github-markdown-css/github-markdown.css'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
import * as echarts from 'echarts'
import router from './router'
import importElementComponents from './importElement'
import importEchartsComponents from './importEchartsComponents'
// 按需引入elementui
importElementComponents()
//按需引入echarts
importEchartsComponents()
Vue.config.productionTip = false
Vue.prototype.$echarts = echarts
Vue.use(ElementUI)
Vue.use(cookies)
// Vue.use(hljs)
......@@ -27,15 +32,12 @@ Vue.directive('highlight', function(el) {
// Vue.prototype.http = axios;
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({
el: '#app',
router,
components: { 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/nprogress.css";
import { getToken } from "@/utils/auth";
import { isEmpty } from "@/utils";
import VueRouter from "vue-router";
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'
// import { getToken } from '@/utils/auth'
import { isEmpty } from '@/utils'
import VueRouter from 'vue-router'
// import Router from 'vue-router'
import store from "@/store";
import store from '@/store'
// store
import Article from "@/components/Article";
import Login from "@/components/Login";
import Register from "@/components/Register";
import Onlinewebsocket from "@/components/Onlinewebsocket";
import Home from "@/components/Home";
import Bilicom from "@/components/Bilicom";
import Mavoneditor from "@/components/Mavoneditor";
import Loading from "@/components/Loading";
import Article from '@/components/Article'
import Login from '@/components/Login'
import Register from '@/components/Register'
import Onlinewebsocket from '@/components/Onlinewebsocket'
import Home from '@/components/Home'
import Bilicom from '@/components/Bilicom'
import Mavoneditor from '@/components/Mavoneditor'
import GrilShow from "@/components/GrilShow";
import Csslearn from "@/components/Csslearn";
import GrilShow from '@/components/GrilShow'
import Csslearn from '@/components/Csslearn'
Vue.use(VueRouter);
Vue.use(VueRouter)
const defaultRoutes = [
{
path: "/",
name: "Article",
component: Article,
},
{
path: "/login",
name: "Login",
component: Login,
},
{
path: "/register",
name: "Register",
component: Register,
},
{
path: "/home",
name: "Home",
component: Home,
},
{
path: "/onlinewebsocket",
name: "Onlinewebsocket",
component: Onlinewebsocket,
},
{
path: "/bilicom",
name: "Bilicom",
component: Bilicom,
},
{
path: "/mavoneditor",
name: "Mavoneditor",
component: Mavoneditor,
},
{
path: "/loading",
name: "loading",
component: Loading,
},
{
path: "/gril",
name: "grilshow",
component: GrilShow,
},
{
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')
// }
];
{
path: '/',
name: 'Article',
component: Article
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/register',
name: 'Register',
component: Register
},
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/onlinewebsocket',
name: 'Onlinewebsocket',
component: Onlinewebsocket
},
{
path: '/bilicom',
name: 'Bilicom',
component: Bilicom
},
{
path: '/mavoneditor',
name: 'Mavoneditor',
component: Mavoneditor
},
{
path: '/gril',
name: 'grilshow',
component: GrilShow
},
{
path: '/css',
name: 'css',
component: Csslearn
}
]
let routes = [
...defaultRoutes,
// ...modulesRoutes,
// ...errorRoutes,
// ...dashboardRouters
];
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch((err) => err);
};
...defaultRoutes
// ...modulesRoutes,
// ...errorRoutes,
// ...dashboardRouters
]
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
return originalPush.call(this, location).catch((err) => err)
}
const router = new VueRouter({
routes,
});
routes
})
const whiteList = ["/login", "/register"];
// const whiteList = ['/login', '/register']
router.beforeEach(async (to, from, next) => {
next();
let yma16siteUserInfo = localStorage.getItem("yma16siteUserInfo")
? JSON.parse(localStorage.getItem("yma16siteUserInfo"))
: "";
let name = yma16siteUserInfo.username,
pwd = yma16siteUserInfo.password;
next()
let yma16siteUserInfo = localStorage.getItem('yma16siteUserInfo')
? JSON.parse(localStorage.getItem('yma16siteUserInfo'))
: ''
let name = yma16siteUserInfo.username
let pwd = yma16siteUserInfo.password
let hasToken = {
name: name,
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();
let hasToken = {
name: name,
password: pwd
}
} 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();
}
});
next()
}
})
router.afterEach((to, from) => {
Nprogress.done();
});
Nprogress.done()
})
export default router;
export default router
src/weather/EchartWeather.vue
浏览文件 @ b805e45a
......@@ -15,227 +15,227 @@
</template>
<script>
import axios from "axios";
import * as echarts from "echarts";
import axios from 'axios'
export default {
name: "EchartWeather",
data() {
return {
msg: "贵阳天气",
baseurl: "/api/",
// baseurl: 'http://yongma16.xyz/',
// baseurl: 'api/article/weather/',
tabPosition: "left",
weather_title: [],
weather_high: [],
weather_low: [],
weather_discribe: [],
weather_windem: [],
weather_windwl: [],
tableData: [],
};
},
mounted() {
this.initWeatherLine();
},
methods: {
initWeatherLine() {
let that = this;
async function waitGetWeatherData() {
await that.getWeatherData();
await that.weatherInint();
}
waitGetWeatherData().then((o) => {
console.log(o);
}); // 同步
name: 'EchartWeather',
data () {
return {
msg: '贵阳天气',
baseurl: '/api/',
// baseurl: 'http://yongma16.xyz/',
// baseurl: 'api/article/weather/',
tabPosition: 'left',
weather_title: [],
weather_high: [],
weather_low: [],
weather_discribe: [],
weather_windem: [],
weather_windwl: [],
tableData: []
}
},
getWeatherData() {
let that = this;
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");
});
mounted () {
this.initWeatherLine()
},
weatherInint() {
// 基于准备好的dom，初始化echarts实例
console.log("echarts!");
var that = this; // 传递
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);
var dom = document.getElementById("echart_weather");
// console.log('dom', dom)
var myChart = echarts.init(dom);
// 绘制图表
var option = {
title: {
text: that.msg,
subtext: "气温°C",
},
tooltip: {
trigger: "axis",
},
// legend: {
// data: ['最高', '最低']
// },
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: "none",
},
dataView: {
readOnly: false,
},
magicType: {
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",
methods: {
initWeatherLine () {
let that = this
async function waitGetWeatherData () {
await that.getWeatherData()
await that.weatherInint()
}
waitGetWeatherData().then((o) => {
console.log(o)
}) // 同步
},
getWeatherData () {
let that = this
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 () {
// 基于准备好的dom，初始化echarts实例
const echarts = this.$echarts
if (!echarts) return
const that = this // 传递
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)
let dom = document.getElementById('echart_weather')
// console.log('dom', dom)
let myChart = echarts.init(dom)
// 绘制图表
let option = {
title: {
text: that.msg,
subtext: '气温°C'
},
type: "max",
name: "最高点",
},
],
],
},
},
],
};
myChart.setOption(option); // 画折线图
window.onresize = function () {
myChart.resize();
};
}, 3000);
resolve("绘制折线图Promise");
});
// dom = null; //销毁
},
},
};
tooltip: {
trigger: 'axis'
},
// legend: {
// data: ['最高', '最低']
// },
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {
readOnly: false
},
magicType: {
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>
<style scoped>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或