From b9e3633331692b516012ced0bc4b33b6bc328281 Mon Sep 17 00:00:00 2001 From: kenken-xr <1071502670@qq.com> Date: Sun, 23 Jan 2022 14:19:32 +0800 Subject: [PATCH] vue2 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1.添加用户登录注册退出时的提示 弹出Toast提示1秒后跳转 2.增加列表下拉刷新 3.新建vue2不打包 方便本地调试 更新版本和结构 4.在远程服务器获取不到数据时使用mock进行数据模拟 --- codes/news_recsys/news_rec_web/README.md | 105 ++++++++++++++++++ .../Vue-newsinfo/package-lock.json | 40 +++++-- .../news_rec_web/Vue-newsinfo/package.json | 5 +- .../Vue-newsinfo/src/components/hotLists.vue | 67 ++++++----- .../Vue-newsinfo/src/components/recLists.vue | 57 ++++++---- .../Vue-newsinfo/src/components/signIn.vue | 22 +++- .../news_rec_web/Vue-newsinfo/src/main.js | 5 +- .../news_rec_web/Vue-newsinfo/src/store.js | 9 ++ 8 files changed, 247 insertions(+), 63 deletions(-) create mode 100644 codes/news_recsys/news_rec_web/README.md diff --git a/codes/news_recsys/news_rec_web/README.md b/codes/news_recsys/news_rec_web/README.md new file mode 100644 index 00000000..b78fff98 --- /dev/null +++ b/codes/news_recsys/news_rec_web/README.md @@ -0,0 +1,105 @@ +### 新闻推荐系统 + + + 基于vue的框架Vant UI的基本使用。 + + + 基于nodejs的npm包管理工具、打包工具webpack和与之相对应的插件。 + + + vue路由的相关知识，路由的配置和渲染以及路由守卫的使用。 + + + vue-axios的使用,项目里调用接口都是用的这个异步ajax插件。 + + + 全局组件的使用。 + +--- + +### 项目地址 + +#### vue2(自动打包 方便运行在远程服务器) + +**源代码:** +[GitHub](https://github.com/datawhalechina/fun-rec/tree/master/codes/news_recsys/news_rec_web/Vue-newsinfo) + +**演示链接：** +http://47.108.56.188:8686/#/ + +- 测试用户名: `11` 测试密码: `111111` + +
+ +#### vue2(不打包 方便本地调试) + +**源代码:** +[GitHub](https://github.com/datawhalechina/fun-rec/tree/master/codes/news_recsys/news_rec_web/vue2-fun-rec) 　[Gitee](https://gitee.com/theNeverLemon/vue-fun-rec) + +**演示链接:** +http://theneverlemon.gitee.io/vue2-fun-rec-project/#/ + +- 测试用户名: `11` 测试密码: `111111` (连接远程服务器，具有推荐功能，优先使用这个) +- 测试用户名: `user` 测试密码: `pass` (mock数据模拟，远程服务器获取不到数据时使用，没有推荐功能) + +--- + + +### 目标功能 +- [X] **用户登录** —— 老用户登录 + +- `记住我`可以保存将登录信息保存7天 + +- `忘记密码` 暂时没有写逻辑不能使用 + + +
+登录 +
+ + +- [X] **用户注册** —— 新用户注册信息 + +- 用户名可以为英文和数字 + +- 密码是大于6位的英文和数字 + +- 年龄是1-100的整数 + +- 注册成功后将跳转至主页面 + +
+注册 +
+ + +- [X] **推荐页及热门页内容显示** —— 根据不同用户个性化显示不同新闻内容 + +- 推荐页和热门页之间的切换（首次切换时会刷新，正在修复这个bug） + +- 点进新闻详情页后阅读次数会实时增加 + +
+推荐 +热门 +
+ + +- [x] **新闻详情** —— 显示当前新闻的详细信息 + +- 显示标题、内容等信息 + +- 底部点击`喜欢`或者`收藏`可以记录将当前用户行为，并在列表页相应增加 + +
+新闻详情 +新闻详情2 +
+ +- [X] **个人中心** —— 记录用户的头像和用户名 + +- 显示头像和登录名（头像暂时统一为DataWhle图标） + +- 显示DataWhale相关介绍 + +- 点击`退出登录`回到登录页 + +
+个人中心1 +个人中心2 +
\ No newline at end of file diff --git a/codes/news_recsys/news_rec_web/Vue-newsinfo/package-lock.json b/codes/news_recsys/news_rec_web/Vue-newsinfo/package-lock.json index d67b0c59..592aeb2c 100644 --- a/codes/news_recsys/news_rec_web/Vue-newsinfo/package-lock.json +++ b/codes/news_recsys/news_rec_web/Vue-newsinfo/package-lock.json @@ -10,12 +10,13 @@ "license": "ISC", "dependencies": { "@vant/area-data": "^1.1.3", - "axios": "^0.19.0", + "axios": "^0.19.2", "bootstrap": "^3.4.1", "crypto-js": "^4.1.1", "into": "^0.2.0", "js-pinyin": "^0.1.9", "less-loader": "^10.2.0", + "mockjs": "^1.1.0", "moment": "^2.24.0", "vant": "^2.12.34", "vue": "^2.6.10", @@ -41,7 +42,7 @@ "style-loader": "^0.23.1", "url-loader": "^2.1.0", "vue-loader": "^15.7.1", - "vue-template-compiler": "^2.6.10", + "vue-template-compiler": "^2.6.14", "vuex": "^2.5.0", "webpack-cli": "^3.3.6", "webpack-dev-server": "^3.7.2", @@ -620,8 +621,8 @@ }, "node_modules/axios": { "version": "0.19.2", - "resolved": "https://registry.npmmirror.com/axios/download/axios-0.19.2.tgz?cache=0&sync_timestamp=1633067760110&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Faxios%2Fdownload%2Faxios-0.19.2.tgz", - "integrity": "sha1-PqNsXYgY0NX4qKl6bTa4bNwAyyc=", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz", + "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==", "deprecated": "Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410", "dependencies": { "follow-redirects": "1.5.10" @@ -5421,6 +5422,17 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/mockjs": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/mockjs/-/mockjs-1.1.0.tgz", + "integrity": "sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==", + "dependencies": { + "commander": "*" + }, + "bin": { + "random": "bin/random" + } + }, "node_modules/moment": { "version": "2.29.1", "resolved": "https://registry.nlark.com/moment/download/moment-2.29.1.tgz", @@ -8088,8 +8100,8 @@ }, "node_modules/vue-template-compiler": { "version": "2.6.14", - "resolved": "https://registry.nlark.com/vue-template-compiler/download/vue-template-compiler-2.6.14.tgz", - "integrity": "sha1-ovDn2YVnDULJye4NBE/tdpD092M=", + "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz", + "integrity": "sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==", "dev": true, "dependencies": { "de-indent": "^1.0.2", @@ -9488,8 +9500,8 @@ }, "axios": { "version": "0.19.2", - "resolved": "https://registry.npmmirror.com/axios/download/axios-0.19.2.tgz?cache=0&sync_timestamp=1633067760110&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Faxios%2Fdownload%2Faxios-0.19.2.tgz", - "integrity": "sha1-PqNsXYgY0NX4qKl6bTa4bNwAyyc=", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz", + "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==", "requires": { "follow-redirects": "1.5.10" } @@ -13486,6 +13498,14 @@ "minimist": "^1.2.5" } }, + "mockjs": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/mockjs/-/mockjs-1.1.0.tgz", + "integrity": "sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==", + "requires": { + "commander": "*" + } + }, "moment": { "version": "2.29.1", "resolved": "https://registry.nlark.com/moment/download/moment-2.29.1.tgz", @@ -15679,8 +15699,8 @@ }, "vue-template-compiler": { "version": "2.6.14", - "resolved": "https://registry.nlark.com/vue-template-compiler/download/vue-template-compiler-2.6.14.tgz", - "integrity": "sha1-ovDn2YVnDULJye4NBE/tdpD092M=", + "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz", + "integrity": "sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==", "dev": true, "requires": { "de-indent": "^1.0.2", diff --git a/codes/news_recsys/news_rec_web/Vue-newsinfo/package.json b/codes/news_recsys/news_rec_web/Vue-newsinfo/package.json index e83123f4..3000b525 100644 --- a/codes/news_recsys/news_rec_web/Vue-newsinfo/package.json +++ b/codes/news_recsys/news_rec_web/Vue-newsinfo/package.json @@ -5,12 +5,13 @@ "main": "webpack.config.js", "dependencies": { "@vant/area-data": "^1.1.3", - "axios": "^0.19.0", + "axios": "^0.19.2", "bootstrap": "^3.4.1", "crypto-js": "^4.1.1", "into": "^0.2.0", "js-pinyin": "^0.1.9", "less-loader": "^10.2.0", + "mockjs": "^1.1.0", "moment": "^2.24.0", "vant": "^2.12.34", "vue": "^2.6.10", @@ -36,7 +37,7 @@ "style-loader": "^0.23.1", "url-loader": "^2.1.0", "vue-loader": "^15.7.1", - "vue-template-compiler": "^2.6.10", + "vue-template-compiler": "^2.6.14", "vuex": "^2.5.0", "webpack-cli": "^3.3.6", "webpack-dev-server": "^3.7.2", diff --git a/codes/news_recsys/news_rec_web/Vue-newsinfo/src/components/hotLists.vue b/codes/news_recsys/news_rec_web/Vue-newsinfo/src/components/hotLists.vue index d5de9fcf..55cede7b 100644 --- a/codes/news_recsys/news_rec_web/Vue-newsinfo/src/components/hotLists.vue +++ b/codes/news_recsys/news_rec_web/Vue-newsinfo/src/components/hotLists.vue @@ -13,7 +13,7 @@ 推荐 -
  • +
    • -
    - - - - - -
    -

    - {{item.cate}} - {{ item.title }} -

    -

    - {{ item.ctime}} - 阅读：{{item.read_num}} - - 收藏:{{item.collections}} -

    -
    -     -     -     -
    + +
    + + + + + +
    +

    + {{item.cate}} + {{ item.title }} +

    + +

    + {{ item.ctime}} + 阅读：{{item.read_num}} + + 收藏:{{item.collections}} +

    +
    +     +     +     +
    +     + + @@ -63,13 +68,25 @@ vanListLoading: false, // 加载状态 finished: false, // 是否加载 finishedText: '', // 加载完成后的提示文案 - scrollTop:0 + scrollTop:0, + + isLoading: false, }; }, components: { bottomBar }, + mounted () { + window.addEventListener("scroll", this.handleScroll, true); + }, methods: { + onRefresh() { + setTimeout(() => { + this.isLoading = false; + this.$store.commit('clearList', "hotList") + this.getList() + }, 1000); + }, getList() { let url = '/recsys/hot_list?' + 'user_id=' + this.$store.state.user.username this.axios.get(url).then(res => { @@ -90,7 +107,7 @@ }, toHot() { this.$router.push('/hotLists') - } + }, }, // 当组件在 内被切换，activated 会被对应执行 diff --git a/codes/news_recsys/news_rec_web/Vue-newsinfo/src/components/recLists.vue b/codes/news_recsys/news_rec_web/Vue-newsinfo/src/components/recLists.vue index 9ffcb136..ca38481f 100644 --- a/codes/news_recsys/news_rec_web/Vue-newsinfo/src/components/recLists.vue +++ b/codes/news_recsys/news_rec_web/Vue-newsinfo/src/components/recLists.vue @@ -24,30 +24,33 @@ -
    - - - - - -
    -

    - {{item.cate}} - {{ item.title }} -

    - -

    - {{ item.ctime}} - 阅读：{{item.read_num}} - - 收藏:{{item.collections}} -

    -
    -     -     -     -
    + + +
    + + + + + +
    +

    + {{item.cate}} + {{ item.title }} +

    +

    + {{ item.ctime}} + 阅读：{{item.read_num}} + + 收藏:{{item.collections}} +

    +
    +     +     +     +
    +     + @@ -65,12 +68,20 @@ finished: false, // 是否加载 finishedText: '', // 加载完成后的提示文案 scrollTop:0, + isLoading: false, }; }, components: { bottomBar }, methods: { + onRefresh() { + setTimeout(() => { + this.isLoading = false; + this.$store.commit('clearList', "hotList") + this.getList() + }, 1000); + }, getList() { var url; if(this.$store.state.type == 'signIn'){ diff --git a/codes/news_recsys/news_rec_web/Vue-newsinfo/src/components/signIn.vue b/codes/news_recsys/news_rec_web/Vue-newsinfo/src/components/signIn.vue index 9672943a..b7d21582 100644 --- a/codes/news_recsys/news_rec_web/Vue-newsinfo/src/components/signIn.vue +++ b/codes/news_recsys/news_rec_web/Vue-newsinfo/src/components/signIn.vue @@ -52,6 +52,8 @@ this.axios.post(url, res).then(resource => { if (resource.data.code === 200) { + console.log('success'); + let loginInfo = { LoginName: res.username, openId: "asfafsfsfsdfsdfsdfdsf" @@ -67,8 +69,24 @@ this.$store.state.type = 'signIn' this.$store.state.user.username = res.username - this.$router.push({name:'recLists' ,params:{type:'signIn',username:this.model.username}}) - + + const toast = Toast({ + message: '登陆成功', + icon:'success' + }); + + let second = 1; + // 延迟一秒执行 + const timer = setInterval(() => { + second--; + if (!second) { + clearInterval(timer); + // 手动清除 Toast + Toast.clear(); + this.$router.push({name:'recLists' ,params:{type:'signIn',username:this.model.username}}) + } + }, 1000); + }if(resource.data.code === 500){ Toast('登陆失败') }if(resource.data.code === 501){ diff --git a/codes/news_recsys/news_rec_web/Vue-newsinfo/src/main.js b/codes/news_recsys/news_rec_web/Vue-newsinfo/src/main.js index 2d18231e..2c384e22 100644 --- a/codes/news_recsys/news_rec_web/Vue-newsinfo/src/main.js +++ b/codes/news_recsys/news_rec_web/Vue-newsinfo/src/main.js @@ -15,6 +15,7 @@ import store from './store'; import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios); + // axios公共基路径，以后所有的请求都会在前面加上这个路径 axios.defaults.baseURL = "http://47.108.56.188:3000"; // 设置表单提交方式，默认是 json @@ -59,6 +60,7 @@ Vue.use(List); import { Cell } from 'vant' Vue.use(Cell) import { PullRefresh } from 'vant' +import 'vant/lib/pull-refresh/style'; Vue.use(PullRefresh) import { Tabbar, TabbarItem } from 'vant'; import 'vant/lib/tabbar/style' @@ -71,7 +73,8 @@ Vue.use(NavBar); import { Button } from 'vant'; import 'vant/lib/button/style' Vue.use(Button); -import 'vant/lib/toast/style' +import 'vant/lib/toast/style'; + Vue.config.devtools = false; //生产环境中需要设置为false diff --git a/codes/news_recsys/news_rec_web/Vue-newsinfo/src/store.js b/codes/news_recsys/news_rec_web/Vue-newsinfo/src/store.js index 466687fc..cf929acf 100644 --- a/codes/news_recsys/news_rec_web/Vue-newsinfo/src/store.js +++ b/codes/news_recsys/news_rec_web/Vue-newsinfo/src/store.js @@ -15,6 +15,15 @@ export default new Vuex.Store({ hotList: [], //热门页的新闻列表 }, mutations: { + // 清空列表 在刷新时调用 重新给列表赋值 + clearList(state, payload){ + if(payload == "recList"){ + state.recList = [] + }else if(payload == "hotList"){ + state.hotList = [] + } + }, + //点进新闻详情页时触发，让阅读次数增加 numChange(state, payload) { let reg = /NewsInfo\//