Skip to content

M
myblogVue_django

yma16 / myblogVue_django

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

fix:倒序

上级 a2432a94
隐藏空白更改
内联 并排
Showing with 183 addition and 278 deletion
config/index.js
浏览文件 @ 7ac4108d
......@@ -11,7 +11,7 @@ module.exports = {
assetsPublicPath: "/",
proxyTable: {
"/api/": {
target: "http://114.116.52.53/", //后端接口地址
target: "http://yongma16.xyz/", //后端接口地址
ws: true, //接受websocket请求
changeOrigin: true, //是否允许跨越
chunkOrigins: true,
......
src/comment/ArticleComment.vue
浏览文件 @ 7ac4108d
......@@ -55,7 +55,7 @@ export default {
};
},
mounted() {
this.getComments();
articleId && this.getComments();
},
methods: {
dateToString(dateValue) {
......@@ -95,7 +95,6 @@ export default {
let params = {
articleId: articleId ? articleId : that.articleId,
};
console.log("获取评论id", params.articleId);
axios
.post(that.baseurl + "comment/get/", params)
.then((res) => {
......@@ -106,35 +105,34 @@ export default {
item.date = that.dateToString(item.date);
});
} catch (e) {
console.log(e);
throw Error(e)
}
console.log("评论获取成功", res);
})
.catch((r) => {
console.log("评论获取失败", r);
throw Error(r)
});
},
increment(userId, articleId, content) {
if (content === "" || !content) {
this.$notify({
title: "评论失败！",
message: "评论内容不能为空",
position: "top-left",
});
return false;
}
let that = this;
if (!localStorage.getItem("yma16siteUserInfoName")) {
if (!localStorage.getItem("yma16siteUserInfo")) {
that.$router
.push({
path: "/login",
})
.catch((error) => {
console.log(error);
throw Error(error);
});
} else {
that.userId = localStorage.getItem("yma16siteUserInfoName");
console.log("提交评论", articleId, that.userId, content);
if (content === "" || !content) {
that.$notify({
title: "评论失败！",
message: "评论内容不能为空",
position: "top-left",
});
return false;
}
const userInfo = JSON.parse(localStorage.getItem("yma16siteUserInfo"));
that.userId = userInfo.username;
let params = {
username: that.userId,
articleId: articleId,
......@@ -151,11 +149,18 @@ export default {
item.date = that.dateToString(item.date);
});
} catch (e) {
console.log(e);
throw Error(e)
}
})
.catch((r) => {
console.log("评论提交失败", r);
that.$router
.push({
path: "/login",
})
.catch((error) => {
throw Error(error)
});
throw Error(r);
});
}
},
......
src/components/Article.vue
浏览文件 @ 7ac4108d
......@@ -262,7 +262,7 @@ export default {
pageSize: 4,
pageArray: [6, 8, 10],
postcomment: {
articleId: 1,
articleId: undefined,
articleCommit: null,
},
articleId: [], //文章的id
......@@ -270,8 +270,6 @@ export default {
},
watch: {
topshow: function (newvalue, oldvalue) {
console.log("侦听");
console.log("new", newvalue, "old", oldvalue);
if (newvalue === true) {
document.getElementById("topiconid").style.display = "none";
} else {
......@@ -293,16 +291,13 @@ export default {
handleSizeChange(val) {
// 转到第一页md_title
let that = this;
console.log(`每页 ${val} 条`);
that.pageAnalysFun(that.pageAnalys.allTitle, val); //触发修改
},
handleCurrentChange(val) {
let that = this;
console.log(that.currentPage, "currentPage", that.pageAnalys.allTitle);
//触发md_title的修改
that.currentPage = val;
that.pageAnalysFun(that.pageAnalys.allTitle); //触发修改
console.log(`当前页: ${val}`);
},
pageAnalysFun(allTitleArray, selectListLength) {
let that = this;
......@@ -315,7 +310,6 @@ export default {
that.splitLength = selectListLength; //划分长度
}
splitLength = that.splitLength;
console.log("一页几条", splitLength);
let splitNum = Math.ceil(that.total / splitLength); //向上取整
that.pageAnalys.childNum = splitNum; //子数组个数
that.pageAnalys.allTitle = allTitleArray; //所有标题
......@@ -348,20 +342,15 @@ export default {
try {
that.md_title = that.pageAnalys.titleArray[this.currentPage - 1];
} catch (e) {
console.log(e);
throw Error(e)
}
console.log("总数", that.pageAnalys.titleArray);
console.log("分页数据", that.pageAnalys.titleArray[this.currentPage - 1]);
console.log("当前页", that.md_title);
},
increment: function () {
this.$store.commit("increment");
console.log(this.$store.state.count);
},
topvisible: function () {
let dom = document.getElementById("hometitle");
this.topshow = this.elementIsVisibleInViewport(dom);
// console.log('this.topshow', this.topshow)
setTimeout(this.topvisible);
},
elementIsVisibleInViewport: function (el, partiallyVisible = false) {
......@@ -375,7 +364,7 @@ export default {
: top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
},
li_errorClass: function () {
console.log("选择文章");
},
cssPage: function (index) {
this.challenge_loc = index;
......@@ -387,7 +376,7 @@ export default {
path: "/css",
})
.catch((error) => {
console.log(error);
throw Error(error)
});
break;
case "echarts地图配置":
......@@ -396,7 +385,7 @@ export default {
path: "/home",
})
.catch((error) => {
console.log(error);
throw Error(error)
});
break;
case "websocket聊天":
......@@ -405,14 +394,13 @@ export default {
path: "/onlinewebsocket",
})
.catch((error) => {
console.log(error);
throw Error(error)
});
break;
case "vue3测试平台":
window.open(this.baseurl + "emoji/index/");
window.open(this.baseurl + "/emoji_api/index/");
break;
default:
console.log("case name没找到");
break;
}
},
......@@ -445,72 +433,37 @@ export default {
// 传入索引
})
.then((res) => {
// alter('提交中');
// console.log(res.data)
if (res.data.code === 1) {
console.log("success return home!");
// that.$router.push({path:'/home'})
// 无需跳转
// document.cookie= `user=${that.ruleForm.name}`
// 添加cookie
console.log("获取Article");
let respdata = res.data;
let content = respdata.article;
that.md_data = []; // 清空
// console.log(that.md_data)
content.map((o) => {
that.md_data.push(o); // 传入一个文章
});
that.the_title = respdata.the_title;
} else if (res.data.code === 0) {
// alter("失败！")
console.log("post 失败");
that.$message.error('失败')
}
})
.catch((res) => {
console.log(res);
.catch((error) => {
throw Error(error)
});
console.log("that.postcomment.articleId", that.postcomment.articleId);
that.getCommentsFromArticle(that.postcomment.articleId);
},
},
// mounted() {
// console.log('document滚动',document.documentElement.scrollTop);
// window.addEventListener("scroll", this.handleScroll);
// window.addEventListener("echarts", this.datasetfunc);
// },
// watch(){
// console.log('watch事件！');
// console.log('document滚动',document.documentElement.scrollTop);
// },
// destroyed() {
// console.log('document滚动',document.documentElement.scrollTop);
// // window.removeEventListener("echarts", this.datasetfunc);
// },
created: function () {
// 初始化
console.log("初始化");
let that = this;
// window.οnscrοll = function () {
// //鼠标滚轮滚动距离超过10像素时，回到顶部按钮才显示
// if (document.documentElement.scrollTop > 10) {
// that.toTopIsShow = true;
// } else {
// that.toTopIsShow = false;
// }
// };
console.log("测试created！");
axios
.get(that.baseurl + "article/index/")
.then((res) => {
console.log("获取Article", res);
let resdata = res.data;
let content = resdata.article; // 传递过来的文章 进行处理
let title = resdata.title;
that.articleId = resdata.articleObjectId;
console.log("获取ArticleId", that.articleId);
// console.log('content', content, 'title', title)
that.postcomment.articleId = resdata.articleId;
this.$refs.commentRef.getComments(that.postcomment.articleId); //触发子组件的方法
content.map((o) => {
that.md_data.push(o);
});
......@@ -518,31 +471,10 @@ export default {
return o;
});
that.the_title = resdata.the_title;
console.log("分页实现");
this.pageAnalysFun(titleAllArray); //分页
// that.md_data.push(res.data.article); //markdown值传递
// let weather = resdata.weather
// let high = weather.high
// let low = weather.low
// console.log('weather', weather)
// weather.title.map((o) => {
// that.weather_title.push(o)
// })
// high.map((o) => {
// that.weather_high.push(o)
// })
// low.map((o) => {
// that.weather_low.push(o)
// })
// try {
// this.datasetfunc() // 等待dom和文件加载完之后执行dataserfunc,加载天气
// } catch (e) {
// console.log(e)
// window.onload = this.datasetfunc // 等待dom
// }
})
.catch((res) => {
console.log(res);
.catch((r) => {
throw Error(r);
}); // get log
},
};
......
src/components/Csslearn.vue
浏览文件 @ 7ac4108d
......@@ -67,7 +67,6 @@ export default {
window.parent.location.href = this.ifreame_content;
},
li_errorClass: function () {
console.log(0);
},
get_ifreame: function (index) {
let that = this; // that
......@@ -77,15 +76,10 @@ export default {
},
getCss: function () {
try {
console.log(
"domMain",
document.getElementById("mainappid"),
document.getElementById("mainappid").style
);
document.getElementById("mainappid").style.padding = "0";
document.getElementById("mainappid").style.margin = "0";
} catch (e) {
console.log("e", e);
throw Error(e)
}
let that = this;
......@@ -101,7 +95,6 @@ export default {
// 标题传递
// eslint-disable-next-line camelcase
that.css_title = csstitle;
console.log(that.css_path, that.css_title);
// 传递第一个路html路径
that.ifreame_content = that.css_path[0];
// 传递长度
......
src/components/Login.vue
浏览文件 @ 7ac4108d
......@@ -21,6 +21,7 @@
type="password"
v-model="ruleForm.pass"
autocomplete="off"
show-password
></el-input>
</el-form-item>
<el-form-item>
......@@ -31,7 +32,7 @@
</el-form-item>
<el-form-item>
<el-link target="_blank" @click="$router.push({ path: '/register' })"
>没有账号？</el-link
>没有账号?</el-link
>
<el-link type="primary" @click="$router.push({ path: '/register' })"
>去注册</el-link
......@@ -43,12 +44,11 @@
</template>
<script>
import axios from "axios";
import store from "@/store";
export default {
name: "Login",
data() {
var checkName = (rule, value, callback) => {
const checkName = (rule, value, callback) => {
if (!value) {
return callback(new Error("账号不能为空"));
}
......@@ -63,7 +63,7 @@ export default {
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
const validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
} else {
......@@ -104,39 +104,37 @@ export default {
this.$refs[formName].validate((valid) => {
if (valid) {
// 提交数据
console.log(that.ruleForm.name, that.ruleForm.pass);
// axios提交数据 post
const loginUrl = that.baseurl + "user/login/";
const userInfo = {
name: that.ruleForm.name,
password: that.ruleForm.pass,
};
axios
that.$axios
.post(loginUrl, userInfo)
.then((res) => {
// alter('提交中');
console.log(res.data);
if (res.data.code == 1) {
localStorage.setItem("yma16siteUserInfoName", userInfo.name);
localStorage.setItem("yma16siteUserInfoPwd", userInfo.password);
localStorage.setItem(
"yma16siteUserInfo",
JSON.stringify({
username: userInfo.name,
password: userInfo.password,
})
);
store.commit("setUserInfo", userInfo); // store信息
console.log("return login success!");
document.cookie = `user=${that.ruleForm.name}`;
that.$router.push({ path: "/" });
// 添加cookie
} else if (res.data.code == 0) {
// alter("失败！")
console.log("失败", res);
// alter("失败！" res.data.msg)
that.$message.error('用化名或密码错误');
}
// that.$cookies.set('')
})
.catch((res) => {
console.log("post失败");
console.log(res);
.catch((error) => {
that.$message.error(error);
});
} else {
alert("请输入账号密码");
console.log("请输入账号密码");
that.$message.error("请输入账号密码");
return false;
}
});
......
src/components/Register.vue
浏览文件 @ 7ac4108d
......@@ -45,13 +45,15 @@
type="password"
v-model="ruleForm.pass"
autocomplete="off"
show-password
></el-input>
</el-form-item>
<el-form-item label="确认" prop="checkPass">
<el-form-item label="密码" prop="checkPass">
<el-input
type="password"
v-model="ruleForm.checkPass"
autocomplete="off"
show-password
></el-input>
</el-form-item>
<el-form-item>
......@@ -62,7 +64,7 @@
</el-form-item>
<el-form-item>
<el-link target="_blank" @click="$router.push({ path: '/login' })"
>已有账号？</el-link
>已有账号?</el-link
>
<el-link type="primary" @click="$router.push({ path: '/login' })"
>去登录</el-link
......@@ -136,7 +138,6 @@ export default {
const that = this;
if (valid) {
// 提交数据
console.log(this.ruleForm.name, this.ruleForm.pass);
// alert("yes submit!");
that.register_success = false; // 初始化register的状态
that.register_error = false;
......@@ -147,34 +148,19 @@ export default {
password: that.ruleForm.pass,
})
.then(function (res) {
console.log("成功post", res);
console.log(res.data.code);
if (res.data.code === 0) {
console.log("重名");
console.log(that.$cookies.get("user_session")); // 取出cookies的user_session
console.log(that.$cookies); // 存在
document.cookie = `user=${that.ruleForm.name}`;
that.register_error = true;
that.$message({
message: "名称重复" + that.ruleForm.name + "!",
type: "error",
});
// console.log(this.$cookies)
} else {
that.register_success = true;
console.log("时间节点");
that.$message({
message: "注册成功，欢迎您，" + that.ruleForm.name + "!",
type: "success",
});
// let token={'user':res.data.name};//传递主码用户名即可
// this.$cookie.set('token',token,1);//设置token
// console.log('token设置');
// let token=this.$cookie.get('token');
// console.log(token);
// console.log('设置token成功！');
}
})
.catch(function (res) {
......@@ -183,17 +169,12 @@ export default {
message: "注册失败" + that.ruleForm.name + "!",
type: "error",
});
alert("后端的问题！");
console.log("失败post", res);
});
} else {
// alert("no submit!");
console.log("前端的问题！");
that.$message({
message: "注册失败" + that.ruleForm.name + "!",
type: "error",
});
// console.log(this.$cookies);
return false;
}
});
......
src/router/index.js
浏览文件 @ 7ac4108d
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 Loading from "@/components/Loading";
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: "/",
name: "Article",
component: Article,
},
{
path: '/login',
name: 'Login',
component: Login
path: "/login",
name: "Login",
component: Login,
},
{
path: '/register',
name: 'Register',
component: Register
path: "/register",
name: "Register",
component: Register,
},
{
path: '/home',
name: 'Home',
component: Home
path: "/home",
name: "Home",
component: Home,
},
{
path: '/onlinewebsocket',
name: 'Onlinewebsocket',
component: Onlinewebsocket
path: "/onlinewebsocket",
name: "Onlinewebsocket",
component: Onlinewebsocket,
},
{
path: '/bilicom',
name: 'Bilicom',
component: Bilicom
path: "/bilicom",
name: "Bilicom",
component: Bilicom,
},
{
path: '/mavoneditor',
name: 'Mavoneditor',
component: Mavoneditor
path: "/mavoneditor",
name: "Mavoneditor",
component: Mavoneditor,
},
{
path: '/loading',
name: 'loading',
component: Loading
path: "/loading",
name: "loading",
component: Loading,
},
{
path: '/gril',
name: 'grilshow',
component: GrilShow
path: "/gril",
name: "grilshow",
component: GrilShow,
},
{
path: '/css',
name: 'css',
component: Csslearn
}
path: "/css",
name: "css",
component: Csslearn,
},
// {
// path: '/register',
// name: 'Register',
......@@ -102,65 +102,55 @@ const defaultRoutes = [
// component: () =>
// import ('../components/Bilicom.vue')
// }
]
];
let routes = [
...defaultRoutes
...defaultRoutes,
// ...modulesRoutes,
// ...errorRoutes,
// ...dashboardRouters
]
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
return originalPush.call(this, location).catch((err) => err)
}
];
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']
const whiteList = ["/login", "/register"];
router.beforeEach(async (to, from, next) => {
// Nprogress.start()
// next()
// let hasToken = getToken()
next()
console.log('localStorage', localStorage)
let name = localStorage.getItem('yma16siteUserInfoName')
let pwd = localStorage.getItem('yma16siteUserInfoPwd')
next();
let yma16siteUserInfo = localStorage.getItem("yma16siteUserInfo")
? JSON.parse(localStorage.getItem("yma16siteUserInfo"))
: "";
let name = yma16siteUserInfo.username,
pwd = yma16siteUserInfo.password;
let hasToken = {
name: name,
password: pwd
}
console.log('hasToken', hasToken)
console.log('store.state 初始化', store.state)
password: pwd,
};
console.log("localStorage", hasToken);
if (hasToken.name && hasToken.password) {
console.log('store.state.user 存在', store.state.user)
if (isEmpty(store.state.user.userInfo)) {
// 空的 modules下的user
console.log('路由的登录认证')
console.log("路由的登录认证");
// 用户自主登录
await store.dispatch('user/loginUserInfo', hasToken)
// await store.dispatch('user/loginUserInfo', hasToken)
next()
await store.dispatch("user/loginUserInfo", hasToken);
next();
} else {
next()
next();
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
console.log('store.state', store.state)
next()
} else {
console.log('store.state 通过', store.state)
next()
// next({ path: '/login' }) // 否则全部重定向到登录页
// Nprogress.done();
}
// next({ path: "/login" }); //去登录
next();
}
})
});
router.afterEach((to, from) => {
Nprogress.done()
})
Nprogress.done();
});
export default router
export default router;
src/service/user.service.js
浏览文件 @ 7ac4108d
......@@ -2,15 +2,21 @@ import axios from "axios";
export function loginUser(data) {
console.log("用户登录service!", data);
let baseurl = "/api/user/login/";
let baseUrl = "/api/user/login/";
let res = null;
axios
.post(baseurl, data)
.post(baseUrl, data)
.then((o) => {
res = o;
console.log("成功认证", res);
localStorage.setItem("yma16siteUserInfoName", res.name);
localStorage.setItem("yma16siteUserInfoPwd", res.password);
// 只返回username
localStorage.setItem(
"yma16siteUserInfo",
JSON.stringify({
username: data.name, //保存一个用户名
password: data.password,
})
);
})
.catch((r) => {
console.log("登录失败！", r);
......
src/store/modules/user.js
浏览文件 @ 7ac4108d
import { loginUser } from "@/service/user.service";
import { loginUser } from '@/service/user.service'
export default {
// 自带命名空间
namespaced: true,
state: {
// 用户账号密码
userInfo: null
},
getters: {
userInfo: state => { return state.userInfo }
},
mutations: {
// 配置用户登录信息 userInfo
setUserInfo(state, userInfo) {
state.userInfo = userInfo;
}
},
actions: {
// Promise
loginUserInfo({ commit }, info) {
console.log('登录认证 store里面', 'info', info)
return new Promise(async(resolve, reject) => {
try {
let data = await loginUser(info);
// 等待登录信息
console.log('返回的post', data)
// 调用 mutation
commit("setUserInfo", data);
resolve(data);
} catch (error) {
reject(error);
}
})
// 自带命名空间
namespaced: true,
state: {
// 用户账号密码
userInfo: null
},
getters: {
userInfo: state => { return state.userInfo }
},
mutations: {
// 配置用户登录信息 userInfo
setUserInfo (state, userInfo) {
state.userInfo = userInfo
}
},
actions: {
// Promise
loginUserInfo ({ commit }, info) {
console.log('登录认证 store里面', 'info', info)
return new Promise(async (resolve, reject) => {
try {
let data = await loginUser(info)
// 等待登录信息
console.log('返回的post', data)
// 调用 mutation
commit('setUserInfo', data)
resolve(data)
} catch (error) {
reject(error)
}
})
}
}
\ No newline at end of file
}
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或