當前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發布時間：2023/12/29 vue 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 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>  <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:

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);}); 復制代碼

執行多個并發請求

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><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移动端记账本完成的总结（未完待续，电脑快没电了）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：电信联通不回应宽带不达标事件
下一篇： vue-lazyload 使用说明