欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > vue >内容正文

vue

vue.js移动端记账本完成的总结（未完待续，电脑快没电了）

发布时间：2023/12/29 vue 44 豆豆
生活随笔 收集整理的这篇文章主要介绍了 vue.js移动端记账本完成的总结（未完待续，电脑快没电了） 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

两个目的

第一个目的：这一个移动端记账本的创作来源呢，其实是我在学习了理财的课程之后，突然想为自己写一个记账的东西来记录自己每天花费的钱，从而可以降低那些不必要的开销，从而达到理财的第一步。 当然还有另一个目的就是：做这个移动端简单的项目，主要是为了熟悉vue.js，从项目构建到完成目录，以及后台数据库的设计，后台逻辑的处理，全程由我自己一个人完成，这个项目历史大概有1个多月吧，虽然项目看起来很小，但是简单亦不简单啊，这个时间段遇到很多问题，都是自己一个人靠着百度，自己理解解决了问题，总的来说，这个项目对我来还是蛮重要的，还是我的第一个开源项目吧，希望大佬不要嘲笑，看到的尽管留言，给出完善的意见，感谢

项目用的技术展

holderjs:一开始设计原型的时候使用站位图插件

其用法如下： holder.js 可以帮我们快速生成占位图片，而且还能定义占位图片的一些基本样式。

用法简单，可以直接去官网下载，或直接引用Bootcss的CDN :

1、基本：默认单位为px，用小写的x连接图片的宽高：

<img data-src="holder.js/200x100"/> 复制代码

2、使用p代表%：

<img src="holder.js/100px200"/> 复制代码

3、让占位图片在缩放长宽比，可以加上auto参数：

<img src="holder.js/300x200?auto=yes"> 复制代码

4、配色方案：

holder.js共定义了6种占位图片配色，分别是：sky、vine、lava、gray、industrial、social 配色可以通过theme参数设置：

<img src="holder.js/300x200?theme=sky"> 复制代码

5、随机配色：

<img data-src='holder.js/200x100?random=yes"/> 6、更多样式定义：

bg: "#000", // 背景色fg: "#aaa", // 前景色（字符颜色）size: 11, // 字符大小font: "Monaco", // 字体fontweight: "normal" // 字符粗细align: "left"//对齐lineWrap:"0.8"//行间距 <img data-src="holder.js/200x200?bg=#000"/> 复制代码

7、显示文字：按行符\n两边要留空格

<img src="holder.js/300x200?text=图片 \n 300x200"> 复制代码

8、带边框与交叉线：

fastclick:这个用来处理移动端click事件 300 毫秒延迟

其用法如下：

处理移动端click事件 300 毫秒延迟， 由FT Labs开发，Github 项目地址：https://github.com/ftlabs/fastclick。从点击屏幕上的元素到触发元素的click事件，移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢？ 因为它想看看你是不是要进行双击（double tap）操作。 复制代码

兼容性

Mobile Safari on iOS 3 and upwards Chrome on iOS 5 and upwards Chrome on Android (ICS) Opera Mobile 11.5 and upwards Android Browser since Android 2 PlayBook OS 1 and upwards 复制代码

不应用 FastClick 的场景

桌面浏览器；如果viewport meta 标签中设置了width=device-width， Android 上的 Chrome 32+ 会禁用 300ms 延时；Copyviewport meta 标签如果设置了user-scalable=no，Android 上的 Chrome（所有版本）都会禁用 300ms 延迟。IE10 中，可以使用 css 属性-ms-touch-action: none禁止元素双击缩放（参考文章）。 复制代码

引入插件步骤

①在HTML页面中添加<script src=" ../lib/fastclick.js "></script> 注：必须在页面所有Element之前加载脚本文件先实例化fastclick ②在JS中添加fastclick的身体，推荐以下做法： if('addEventListener' in document) {document.addEventListener('DOMContentLoaded',function() {FastClick.attach(document.body);},false);}如果你使用了JQuery，那么JS引入就可以改用下面的写法：$(function() {FastClick.attach(document.body);});如果你使用Browserify或者其他CommonJS-style 系统,当你调用`require('fastclick')`时，`FastClick.attach`事件会被返回，加载FastClick最简单的方式就是下面的方法了： var attachFastClick = require('fastclick'); attachFastClick(document.body); 复制代码

移动端调试插件

VConsole：移动端调试插件 使用 废话不多说，说说怎么使用的吧。 首先去下载相关的代码，由于只需要在页面引入一个js文件，直接去下载就可以，github.com/Tencent/vCo…

或者使用 npm 安装：

npm install vconsole 复制代码

使用webpack，然后js代码中

import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole let vConsole = new VConsole() // 初始化 复制代码

或者找到这个模块下面的 dist/vconsole.min.js ，然后复制到自己的项目中

<head><script src="dist/vconsole.min.js"></script> </head> <!--建议在 `<head>` 中引入哦~ --> <script>// 初始化var vConsole = new VConsole();console.log('VConsole is cool'); </script> 复制代码

优秀的远程服务插件

axios：地址入口 ： www.kancloud.cn/yunye/axios… 用法如下： 安装 使用 npm:

$ npm install axios 复制代码

使用 bower:

$ bower install axios 复制代码

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 复制代码

Example 执行 GET 请求

// 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});// 可选地，上面的请求可以这样做 axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);}); 复制代码

执行 POST 请求

axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);}); 复制代码

执行多个并发请求

function getUserAccount() {return axios.get('/user/12345'); }function getUserPermissions() {return axios.get('/user/12345/permissions'); }axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (acct, perms) {// 两个请求现在都执行完成})); 复制代码

axios API 可以通过向 axios 传递相关配置来创建请求

axios(config) 复制代码

// 发送 POST 请求

axios({method: 'post',url: '/user/12345',data: {firstName: 'Fred',lastName: 'Flintstone'} }); axios(url[, config]) // 发送 GET 请求（默认的方法） axios('/user/12345'); 复制代码

请求方法的别名 为方便起见，为所有支持的请求方法提供了别名

axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]]) 复制代码

自己封装了一下字体响应式改变

rem.js

// 设置字体大小 setFontSize(){(function(doc,win){var docEl = doc.documentElement, //文档根标签resizeEvent = 'orientationchange' in window ? 'orientationchang' :'resize'; //viewport变化事件源var rescale = function(){//重置方法win.clientWidth = docEl.clientWidth;if (!win.clientWidth) return;// 改变DOM根节点fontSize大小的值;// (屏幕宽度/设计图宽度) = 缩放或扩大的比例值;docEl.style.fontSize = 40 * (win.clientWidth / 750) + 'px';}if (!doc.addEventListener) return;win.addEventListener(resizeEvent, rescale, false);doc.addEventListener('DOMContentLoaded', rescale, false);})(document, window); } 复制代码

自己对axios.post()和axios.get()方法进行二次封装

axios_get_post.js

// eslint-disable-next-line /* eslint-disable */ // 对 axios.get() 和 axios.post()进行封装 import axios from 'axios' import qs from 'qs'/* post 方式 axios({method: 'post',url: '/user/123456',data: {username: 'ken',password: '123456'} }) axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone' })get 方式 axios({method: 'get',url: '/user/123456', })// 可选地，上面的请求可以这样做 axios.get('/user', {params: {ID: 12345} })//伪代码的编写 axios({method: 'post' || 'get',url: '/user/123456',data: {username: 'ken',password: '123456',} || params: {ID: '123456'} }) */ export default function axios_get_post(params){return new Promise((resolve, reject)=>{let opt = {method: params.method || 'get',url: params.url,headers: {'Content-Type':'application/x-www-form-urlencoded'},}if(params.method == 'post'){opt.data = params.data}else {// opt.params = params}// 拦截处理axios.interceptors.request.use((req) => {if (req.method === 'post') {// 转换成JSON格式req.data = qs.stringify(req.data);}return req;}, (error) => Promise.reject(error));axios(opt).then(res=>{resolve(res.data)}).catch(err=>{reject(err)})}) } 复制代码

当初封装上述函数的时候遇到一个问题如下：

axios.js以post方式传递数据后台获取不到数据，这到底是什么原因

mint-ui的插件的使用

在这个项目中使用的最多就是MessageBox()这个组件 npm 安装 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i mint-ui@1 -S 复制代码

CDN 目前可以通过 unpkg.com/mint-ui@1 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/mint-ui@1/lib/style.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/mint-ui@1/lib/index.js"></script> 复制代码

Hello world 通过 CDN 的方式我们可以很容易地使用 Mint UI 写出一个 Hello world 页面。

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/mint-ui@1/lib/style.css"> </head> <body><div id="app"><mt-button @click.native="handleClick">按钮</mt-button></div> </body><!-- 先引入 Vue --><script src="https://unpkg.com/vue@1/dist/vue.js"></script><!-- 引入组件库 --><script src="https://unpkg.com/mint-ui@1/lib/index.js"></script><script>new Vue({el: '#app',methods: {handleClick: function() {this.$toast('Hello world!')}}})</script> </html> 复制代码

Message box使用

引入

import { MessageBox } from 'mint-ui'; 复制代码

例子 以标题与内容字符串为参数进行调用

MessageBox('提示', '操作成功'); 复制代码

或者传入一个对象

MessageBox({title: '提示',message: '确定执行此操作?',showCancelButton: true }); 复制代码

此外，MessageBox 还提供了 alert、confirm 和 prompt 三个方法，它们都返回一个 Promise

MessageBox.alert(message, title); MessageBox.alert('操作成功').then(action => {... }); MessageBox.confirm(message, title); MessageBox.confirm('确定执行此操作?').then(action => {... }); MessageBox.prompt(message, title); MessageBox.prompt('请输入姓名').then(({ value, action }) => {... }); 复制代码

滚动加载数据组件

Infinite scroll 引入

import { InfiniteScroll } from 'mint-ui';Vue.use(InfiniteScroll); 复制代码

例子 为 HTML 元素添加 v-infinite-scroll 指令即可使用无限滚动。滚动该元素，当其底部与被滚动元素底部的距离小于给定的阈值（通过 infinite-scroll-distance 设置）时，绑定到 v-infinite-scroll 指令的方法就会被触发。

<ulv-infinite-scroll="loadMore"infinite-scroll-disabled="loading"infinite-scroll-distance="10"><li v-for="item in list">{{ item }}</li> </ul> loadMore() {this.loading = true;setTimeout(() => {let last = this.list[this.list.length - 1];for (let i = 1; i <= 10; i++) {this.list.push(last + i);}this.loading = false;}, 2500); } 复制代码

自己还封装一个简单的滚动加载组件

之前有些过一篇关于这个组件的博客文章：blog.csdn.net/qq_36772866… 也在知乎写过同样的文章： zhuanlan.zhihu.com/p/55123532

码云地址如下：gitee.com/kennana/vue… 只需要：git clone https://gitee.com/kennana/vue_component.git

cd vue_component //进入vue_component目录 npm install //执行此命令 npm run serve //执行此命令即可将项目跑起来 复制代码

遇到跨域问题的解决方案如下

vue.js请求后台遇到跨域引爆这篇文章

Vue CLI3本地代理配置

vue-cli3的本地代理配置

使用了vue-lazyload图片懒加载

一. vue lazyload插件：

插件地址：github.com/hilongjw/vu…

demo：hilongjw.github.io/vue-lazyloa…

二. 简单使用实例： 这个插件还是蛮好用的，就是感觉这个插件的开发文档有点太啰嗦了，一股脑把所有的api扩展都罗列出来，源码中并没有可以运行的实例提供。

其实这个插件做简单使用的话是很简单的，看官方文档的话反而被误导了，可以先按下边的实例实现简单引用，后边再根据开发文档做扩展。

  • 安装插件：
    • npm install vue-lazyload --save-dev 复制代码
  • main.js引入插件：
    • import VueLazyLoad from 'vue-lazyload'Vue.use(VueLazyLoad,{error:'./static/error.png',loading:'./static/loading.png'}) 复制代码
  • vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy
    • <img class="item-pic" v-lazy="newItem.picUrl"/> 复制代码

    vue-router的使用

    // 在进入下一个路由的时候，就获取到下一个页面的title显示出来 // 需要注册一个全局守卫 router.beforeEach((to, from, next)=>{if(to.path=='/'){//如果即将进入登录页面就是直接放心进入next()}else{if(to.meta.requiresAuth && !localStorage.getItem('token')){// 验证token是否存在// to.meta.requiresAuth 是否为真next({path: '/',})}else{if(to.meta.title){document.title = to.meta.title}next();}} }) 复制代码

    router.js

    // eslint-disable-next-line /* eslint-disable */ import Vue from 'vue' import Router from 'vue-router' // import Login from "./views/Login.vue" Vue.use(Router)export default new Router({routes:[{name: 'login',path: '/',component: ()=>import("./views/Login.vue"),meta: {title: '登录'},},{name: 'register',path: '/register',component: ()=>import("./views/Register.vue"),meta: {title: "注册"}},{name: 'addinfo',path: '/addinfo',component: ()=>import("./views/AddInfo.vue"),meta: {title: '记账',requiresAuth: true,}},{name: 'editinfo',path: '/editinfo/:id',component: ()=>import("./views/EditInfo.vue"),meta: {title: '编辑',requiresAuth: true,}},{name: 'showinfo',path: '/showinfo',component: ()=>import("./views/ShowInfo.vue"),meta: {title: '显示信息',requiresAuth: true,}},{name: 'editriqi',path: '/editriji',component: ()=>import("./views/EditRiQi.vue"),meta: {title: '写日记',requiresAuth: true }},{name: 'info',path: '/info/:id',component: ()=>import("./views/Info.vue"),meta: {title: '详细信息',requiresAuth: true }}] }) 复制代码

    此间遇到一个问题就是前台传递数据给后台，但是后台获取不到数据，数据格式是Request Payload

    最近在调试代码时发现有Request Payload的情况，从网上查一些文件， 也都有较多的描述。下面我只是说明一下大家没有注意的地方关于HTTP请求，都是通过URL及参数向后台发送数据。 主要方式有GET, POST。对这两种方式，GET的参数都会放在URL的后面， 一般称之为query参数。 POST的都放在HTTP的报文BODY里，可以query参数的形式， 也可以multipart格式，还有一种JSON格式，即Request Payload格式。multipart, Request Payload是通过request Header中的ContentType区分的：multipart格式：ContentType: multipart/form-data;boundary=--xxxxxxx，注意对multipart的格式都要有boundary做为BODY中的参数分隔符，（关于该格式的讲解以后再写）Request Payload格式：ContentType: application/json在后台的处理中对这三种格式的处理是不相同的。GET格式都在URL后面，以key1=value1&key2=value2的KV格式存在， 且不会很长（协议规定为1024个字节，但现在浏览器都会适当加长一些）。 后台处理这种参数时可以使用同步处理，因为报文头收到后参数也就收全了。POST时参数也可以使用上面的KV格式存在，但是会放在报文体中。 当数据量不大时，一般也会和报文头一起收到。 但数据量大的时会被拆分到多个报文中。因此必须使用异步方式收取。收全后处理同GET相同。对于multipart格式，需要使用流方式边收边解析，因为有可能是大文件上传。对于RequestPayload格式，可能也是异步发送（这个没有验证过）， 但数据量一般不会太大，因此它是一个JSON格式，因此必须等报文收全后才能处理。 目前对JSON格式的支持比较普遍，都有相关的函数来解析JSON字符串， 直接生成JSON对象，因此这种方式也是最方便的。 特别是使用nodejs server时就可以直接在代码中使用了。 复制代码

    解决方法就是：

    import qs from "qs" axios.interceptors.request.use((req) => {if (req.method === 'post') {// 转换成JSON格式req.data = qs.stringify(req.data);}return req; }, (error) => Promise.reject(error)); 复制代码

    http协议的Request Payload 和 Form Data 的区别

    www.cnblogs.com/xuzhudong/p… blog.csdn.net/zwq91231883…

    Axios传参的两种方式，表单数据和json字符串（Form Data和Request Payload）

    第一种方式：Form Datareturn request({headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },transformRequest: [function(data) { //在请求之前对data传参进行格式转换data = Qs.stringify(data)return data}],url: '/test/add', //接口地址method: 'post', //请求类型params: {}, data: {'name': params.name, //传的参数'jobId': params.jobId,'department': params.department,'phone': params.phone,'position ': params.position,'permis': params.permis,'entryTime': params.entryTime}}) 复制代码第二种方式：Json字符串return request({headers: {'Content-Type': 'application/json'},transformRequest: [function(data) {data = JSON.stringify(data)return data}],url: '/test/add',method: 'post',params: {},data: {'name': params.name, //传的参数'jobId': params.jobId,'department': params.department,'phone': params.phone,'position ': params.position,'permis': params.permis,'entryTime': params.entryTime}}) 复制代码

    前台讲完将后台

    php不能获取前台传过来post的数据

    原因是 Content-Type类型设置为payload了 复制代码

    浅谈php接收POST数据的三种方式

    在Web开发中,当用户使用浏览器向服务器POST提交数据时, 我们使用php接受用户POST到服务器的数据,并对数据进行解析和相应的处理. 以下是php接受POST数据的几种方式:一.$_POST 方式接受数据$_POST 方式是由通过HTTP的POST方法传递过来的数据组成的数组,是一个自动全局变量. 注:只能接收Content-Type:application/x-www-form-urlencode提交的数据. 也就是只能接收表单POST过来的数据.二.GLOBLES[‘HTTP_RAW_POST_DATA’]如果访问原始POST数据不是php能够识别的文档类型, 比如:text/xml 或者soap等等,我们可以用$GLOBLES[‘HTTP_RAW_POST_DATA’]来接收,$HTTP_RAW_POST_DATA变量包含有原始POST数据.此变量仅在碰到未识别的MIME数据时产生. 注: $HTTP_RAW_POST_DATA对于enctype=”multipart/form-data”表单数据不可用, 也就是说使用$HTTP_RAW_POST_DATA无法接受网页表单post过来的数据.三. file_get_content(“php://input”);如果访问原始POST数据, 更好的方法是使用file_get_content(“php://input”); 对于未指定Content-Type的POST数据,可以使用该方法读取POST原始数据,包括二进制流也可以.和$HTTP_RAW_POST_DATA比起来.它带来的生存眼里更小,并且不需要任何特殊的php.ini设置. 注: php://input不能用于 enctype=”multipart/form-data”. 例如: $postStr = file_get_contents("php://input"); //获取POST数据四.名词解释 1.MIME数据类型:多用途互联网邮件扩展(MIME, Multipurpose Internet Mail Extension)是一个互联网标准,它扩展了电子邮箱标准, 使其能够支持ASCII字符,二进制格式附件等多种格式的邮件消息.MIME规定了用于表示各种各样的数据类型的符号化方法.此外,在万维网中使用的HTTP协议中也使用MIME的框架.2.原始数据:原始数据是指尚未处理的数据, 这些数据需要经过萃取,组织甚至分析与格式化后才能呈现给他人看. 复制代码

    php的header函数之设置content-type

    //定义编码 header( 'Content-Type:text/html;charset=utf-8 '); //Atom header('Content-type: application/atom+xml'); //CSS header('Content-type: text/css'); //Javascript header('Content-type: text/javascript'); //JPEG Image header('Content-type: image/jpeg'); //JSON header('Content-type: application/json'); //PDF header('Content-type: application/pdf'); //RSS header('Content-Type: application/rss+xml; charset=ISO-8859-1'); //Text (Plain) header('Content-type: text/plain'); //XML header('Content-type: text/xml'); // ok header('HTTP/1.1 200 OK'); //设置一个404头: header('HTTP/1.1 404 Not Found'); //设置地址被永久的重定向 header('HTTP/1.1 301 Moved Permanently'); //转到一个新地址 header('Location: http://www.example.org/'); //文件延迟转向: header('Refresh: 10; url=http://www.example.org/'); print 'You will be redirected in 10 seconds'; //当然，也可以使用html语法实现 // <meta http-equiv="refresh" content="10;http://www.example.org/ /> // override X-Powered-By: PHP: header('X-Powered-By: PHP/4.4.0'); header('X-Powered-By: Brain/0.6b'); //文档语言 header('Content-language: en'); //告诉浏览器最后一次修改时间 $time = time() - 60; // or filemtime($fn), etc header('Last-Modified: '.gmdate('D, d M Y H:i:s', $time).' GMT'); //告诉浏览器文档内容没有发生改变 header('HTTP/1.1 304 Not Modified'); //设置内容长度 header('Content-Length: 1234'); //设置为一个下载类型 header('Content-Type: application/octet-stream'); header('Content-Disposition: attachment; filename="example.zip"'); header('Content-Transfer-Encoding: binary'); // load the file to send: readfile('example.zip'); // 对当前文档禁用缓存 header('Cache-Control: no-cache, no-store, max-age=0, must-revalidate'); header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); // Date in the past header('Pragma: no-cache'); //设置内容类型: header('Content-Type: text/html; charset=iso-8859-1'); header('Content-Type: text/html; charset=utf-8'); header('Content-Type: text/plain'); //纯文本格式 header('Content-Type: image/jpeg'); //JPG*** header('Content-Type: application/zip'); // ZIP文件 header('Content-Type: application/pdf'); // PDF文件 header('Content-Type: audio/mpeg'); // 音频文件 header('Content-Type: application/x-shockw**e-flash'); //Flash动画 //显示登陆对话框 header('HTTP/1.1 401 Unauthorized'); header('WWW-Authenticate: Basic realm="Top Secret"'); print 'Text that will be displayed if the user hits cancel or '; print 'enters wrong login data'; 复制代码

    下载xlsx文件

    $filename = rtrim($_SERVER['DOCUMENT_ROOT'],'/').'/app/files/payment_status.csv'; header('Content-Disposition: attachment; filename=payment_status.xlsx'); header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'); header('Content-Length: ' . filesize($filename)); header('Content-Transfer-Encoding: binary'); header('Cache-Control: must-revalidate'); header('Pragma: public'); readfile($filename); 复制代码

    php命名空间的学习

    zhuanlan.zhihu.com/p/53981022

    php empty 与 unset 区别

    zhuanlan.zhihu.com/p/54716875

    阿里云服务器ubantu14.04部署lavaral5.7博客

    zhuanlan.zhihu.com/p/54818773

    ubuntu14.04 apache修改网站根目录以及默认网页

    zhuanlan.zhihu.com/p/54867843

    php操作mysql数据库中fetch_array/assoc/row/object区别

    zhuanlan.zhihu.com/p/55029525

    今天写开源项目用到的几个php应用

    zhuanlan.zhihu.com/p/55169371

    php生成token

    blog.csdn.net/panxiaomao1…

    mysql学习(一)MySQL存储引擎

    zhuanlan.zhihu.com/p/55226412

    mysql学习(二)数据类型

    zhuanlan.zhihu.com/p/55256359

    mysql学习(三)运算符

    zhuanlan.zhihu.com/p/55265206

    mysql学习(四)数据库

    zhuanlan.zhihu.com/p/55279412

    开源项目移动端记账本接口文档编写

    登录界面Login.vue 每个页面都要认证，如果说他是没有登录，无论访问哪个页面都跳转到首页登录

    request 请求 {user_name: String 用户名,user_pass: String 密码 } response 响应 点击请求登录前台记录本地缓存用户名 缓存用户id 缓存token验证 缓存用户头像img 缓存 {code: int 0表示成功，其他表示失败,user_id: int 用户 id,user_name: string 用户昵称,user_img: string 用户头像,message: "登录成功",token: string,} 如果用户没有注册过就去登录，要提醒用户去注册 复制代码

    注册页面Register.vue

    request 请求 {user_name: String 用户名,user_pass: String 密码 } 将用户名写入本地缓存中。 response 响应 {user_id: int 用户id,user_name: string 用户昵称,code: int 0表示成功，其他表示失败,} 将token写入缓存中 注册成功之后，跳转到登录页面 复制代码

    记账页面AddInfo.vue

    request 请求 {date: string 日期,morning: string 早餐花费,afternoon: string 午餐花费,evening: string 晚餐花费,other: string 其他花费,token: string token验证,userid: int 用户id } 复制代码 response 响应 {code: int 0表示成功，其他表示失败,message: string 用户提示语，user_id: int 用户id，id: int 数据插入的id }复制代码

    修改记账EditInfo.vue

    request 初始化请求 {userid: int 用户id,editid: int 编辑id,token: string 验证, } reponse 初始化,返回特定的一条数据 {userid: int 用户id,editid: int 编辑id,code: int 0表示成功，其他表示失败,date: string 日期,morning: string 早餐花费,afternoon: string 午餐花费,evening: string 晚餐花费,other: string 其他花费,msg: "提示语" }修改后request请求 {date: string 日期,morning: string 早餐花费,afternoon: string 午餐花费,evening: string 晚餐花费,other: string 其他花费,userid: int 用户id,editid: int 编辑id,token: string 验证, }修改后reponse响应 {userid: int 用户id,editid: int 编辑id,code: int 0表示成功，其他表示失败,msg:"提示语", } 复制代码

    展示记账简略信息ShowInfo.vue

    request 初始化请求 {userid: int 用户id,page: int 页数，count: int 一页显示的数量，token: string 验证, } reponse 初始化,返回特定的一条数据 {userid: int 用户id,code: int 0表示成功，其他表示失败,data: [{id: int ,date: string 日期,path: string头像},{id: int ,date: string 日期,path: string头像},{id: int ,date: string 日期,path: string头像}],msg: "提示语" }修改后request请求 {date: string 日期,userid: int 用户id,editid: int 编辑id,token: string 验证, }修改后reponse响应 {userid: int 用户id,editid: int 编辑id,code: int 0表示成功，其他表示失败,msg:"提示语", } 复制代码

    显示详细信息Info.vue

    request 请求 {userid: int 用户id,infoid: int 信息id,token: string 验证, }response 响应 {userid: int 用户id,editid: int 编辑id,code: int 0表示成功，其他表示失败,date: string 日期,morning: string 早餐花费,afternoon: string 午餐花费,evening: string 晚餐花费,other: string 其他花费,msg: "提示语" } 复制代码

    写日记EditRiQi.vue

    request 请求 {userid: int 用户id,content: string 日记内容,token: string 验证 }reponse 响应 {userid: int 用户id,code: int 0表示成功，其他表示失败,msg: "提示语" } 复制代码

    学习了一下mint-ui

    我的码云地址：gitee.com/kennana/min…

    今天研究了一下上拉加载数据组件

    blog.csdn.net/qq_36772866…

    最终界面如下：

    登录

    记账

    显示信息

    编辑

    详细信息

    前台代码

    gitee.com/kennana/mob…

    git clone https://gitee.com/kennana/mobile_account_book.git cd mobile_account_book npm install npm run serve 复制代码

    后台代码

    gitee.com/kennana/acc…

    git clone https://gitee.com/kennana/accounting_backstage.git 复制代码

    工作总结

    gitee.com/kennana/wor…

    https://gitee.com/kennana/work_summary.git 复制代码

    总结

    以上是生活随笔为你收集整理的vue.js移动端记账本完成的总结（未完待续，电脑快没电了）的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。