vue.js移動端記帳本完成的總結（未完待續，電腦快沒電了）
兩個目的
第一個目的：這一個移動端記帳本的創做來源呢，實際上是我在學習了理財的課程以後，忽然想爲本身寫一個記帳的東西來記錄本身天天花費的錢，從而能夠下降那些沒必要要的開銷，從而達到理財的第一步。 固然還有另外一個目的就是：作這個移動端簡單的項目，主要是爲了熟悉vue.js，從項目構建到完成目錄，以及後臺數據庫的設計，後臺邏輯的處理，全程由我本身一我的完成，這個項目歷史大概有1個多月吧，雖然項目看起來很小，可是簡單亦不簡單啊，這個時間段遇到不少問題，都是本身一我的靠着百度，本身理解解決了問題，總的來講，這個項目對我來仍是蠻重要的，仍是個人第一個開源項目吧，但願大佬不要嘲笑，看到的儘管留言，給出完善的意見，感謝javascript
項目用的技術展
holderjs:一開始設計原型的時候使用站位圖插件
其用法以下： holder.js 能夠幫咱們快速生成佔位圖片，並且還能定義佔位圖片的一些基本樣式。php
用法簡單，能夠直接去官網下載，或直接引用Bootcss的CDN : css
一、基本：默認單位爲px，用小寫的x鏈接圖片的寬高：html
<img data-src="holder.js/200x100"/>
複製代碼
<img src="holder.js/100px200"/>
複製代碼
三、讓佔位圖片在縮放長寬比，能夠加上auto參數：vue
<img src="holder.js/300x200?auto=yes">
複製代碼
四、配色方案：java
holder.js共定義了6種佔位圖片配色，分別是：sky、vine、lava、gray、industrial、social 配色能夠經過theme參數設置：node
<img src="holder.js/300x200?theme=sky">
複製代碼
<img data-src='holder.js/200x100?random=yes"/> 六、更多樣式定義：mysql
bg: "#000", // 背景色
fg: "#aaa", // 前景色（字符顏色）
size: 11, // 字符大小
font: "Monaco", // 字體
fontweight: "normal" // 字符粗細
align: "left"//對齊
lineWrap:"0.8"//行間距
<img data-src="holder.js/200x200?bg=#000"/>
複製代碼
七、顯示文字：按行符\n兩邊要留空格webpack
<img src="holder.js/300x200?text=圖片 \n 300x200">
複製代碼
fastclick:這個用來處理移動端click事件 300 毫秒延遲
其用法以下：ios
處理移動端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 指令的方法就會被觸發。
<ul
v-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 CLI3本地代理配置
使用了vue-lazyload圖片懶加載
一. vue lazyload插件：
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 Data
return 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命名空間的學習
php empty 與 unset 區別
阿里雲服務器ubantu14.04部署lavaral5.7博客
ubuntu14.04 apache修改網站根目錄以及默認網頁
php操做mysql數據庫中fetch_array/assoc/row/object區別
今天寫開源項目用到的幾個php應用
php生成token
mysql學習(一)MySQL存儲引擎
mysql學習(二)數據類型
mysql學習(三)運算符
mysql學習(四)數據庫
開源項目移動端記帳本接口文檔編寫
登陸界面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…
今天研究了一下上拉加載數據組件
最終界面以下：
登陸
記帳
顯示信息
編輯
詳細信息
前臺代碼
git clone https://gitee.com/kennana/mobile_account_book.git
cd mobile_account_book
npm install
npm run serve
複製代碼
後臺代碼
git clone https://gitee.com/kennana/accounting_backstage.git
複製代碼
工做總結
https://gitee.com/kennana/work_summary.git
複製代碼
相關文章
- 1. vue.js移動端記帳本完成的總結（未完待續，電腦快沒電了）
- 2. 電路一、2 未完待續
- 3. -未完待續
- 4. 移動端開發常見問題彙總(未完待續)
- 5. 電腦怎樣執行編程語言[未完待續]
- 6. ES6小結（未完待續···）
- 7. DeepLab筆記(未完待續)
- 8. SSD筆記未完待續
- 9. 揹包總結（未完待續）
- 10. JavaScript知識點總結（未完待續）
- 更多相關文章...
- • PHP 完整表單實例 - PHP教程
- • PHP 發送電子郵件 - PHP教程
- • 算法總結-滑動窗口
- • 算法總結-雙指針
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. vue.js移動端記帳本完成的總結（未完待續，電腦快沒電了）
- 2. 電路一、2 未完待續
- 3. -未完待續
- 4. 移動端開發常見問題彙總(未完待續)
- 5. 電腦怎樣執行編程語言[未完待續]
- 6. ES6小結（未完待續···）
- 7. DeepLab筆記(未完待續)
- 8. SSD筆記未完待續
- 9. 揹包總結（未完待續）
- 10. JavaScript知識點總結（未完待續）