Two purposes
The first purpose: The creation of this mobile bookkeeping book was actually caused by my desire to write an bookkeeping book for myself to record the money I spend every day after learning the course of financial management, so as to reduce those unnecessary expenses and achieve the first step of financial management. Of course, there is another purpose: Do the mobile terminal simple projects, mainly in order to be familiar with the vue, js, from project construction to complete directory, and the design of background database, backend logic processing, done by myself a person all the way, the project history is about more than a month, although project looks small, but simple is not simple ah, this time a lot of problems, All is a person relying on Baidu, their own understanding to solve the problem, in general, this project is quite important to me, or my first open source project, I hope the big guy does not laugh at, although see the message, give perfect advice, thank you
Exhibition of technology used in the project
Holderjs: I used the station map plug-in when I first started prototyping
It can be used as follows: holder.js helps us to quickly generate placeholder images and also defines some basic styles for placeholder images.
Bootcss CDN: Bootcss CDN: Bootcss CDN
1. Basic: the default unit is PX and use a lowercase X to connect the width and height of the image:
<img data-src="holder.js/200x100"/>
Copy the code
<img src="holder.js/100px200"/>
Copy the code
3, let the placeholder picture in the zoom aspect ratio, you can add the auto parameter:
<img src="holder.js/300x200? auto=yes">Copy the code4. Color scheme:
Sky, Vine, Lava, Gray, Industrial, and Social can be used as the theme parameter:
<img src="holder.js/300x200? theme=sky">Copy the code
<img data-src=’holder.js/200×100? Random =yes”/>
Font: "Monaco", // fontweight: "normal" // "Left "// align lineWrap:"0.8"// line spacing <img data-src="holder.js/200x200? bg=#000"/>Copy the code7, display text: according to the line character \n to leave Spaces on both sides
<img src="holder.js/300x200? Text = image \n 300x200">Copy the code
Fastclick: This is used to handle mobile click events with a 300 ms delay
Its usage is as follows:
Click event 300 milliseconds delay processing mobile end, by the FT Labs development, making the project address: https://github.com/ftlabs/fastclick. Mobile browsers have a wait time of about 300 milliseconds between clicking on an element on the screen and the click event that triggers the element. Why is that? Because it wants to see if you're going to double tap.Copy the codecompatibility
Mobile Safari on iOS 3 and 'Midnight Chrome' on iOS 5 and 'Midnight Chrome' on Android (ICS) Opera Mobile 11.5 and 'midnight Chrome Android Browser since Android 2 PlayBook OS 1 and upwardsCopy the codeScenarios where FastClick is not applied
Desktop browser; If width=device-width is set in the viewPort meta tag, Chrome 32+ on Android will disable 300ms delay. Copyviewport Meta tag Chrome on Android (all versions) disables 300ms latency if user-Scalable =no is set. In IE10, you can use the CSS property -ms-touch-action: None to disable double-clicking on elements (see article).Copy the codeIntroducing plug-in steps
① Add <script SRC = to HTML page" ../lib/fastclick.js "< span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 13px! Important; word-break: inherit! Important;"if('addEventListener' in document) {
document.addEventListener('DOMContentLoaded'.function() {
FastClick.attach(document.body);
},false); } If you are using JQuery, then JS import can be written as follows:function() { FastClick.attach(document.body); }); If you use Browserify or any other commonJs-style system, when you call 'require('fastclick'Var attachFastClick = require(var attachFastClick = require();'fastclick');
attachFastClick(document.body);
Copy the codeMobile debugging plug-in
VConsole: mobile debugging plug-in to use no more nonsense, say how to use it. First to download the relevant code, because only need to introduce a JS file in the page, directly to download can be github.com/Tencent/vCo…
Or install using NPM:
npm install vconsole
Copy the codeUse Webpack, then js code
The import VConsole from 'VConsole/dist/VConsole. Min. Js' / / import VConsole let VConsole = new VConsole () / / initializedCopy the codeOr find dist/vconsole.min.js under this module and copy it to your own project
<head> <script src="dist/vconsole.min.js"></script> </head> <! <script> // initialize var vConsole = new vConsole (); console.log('VConsole is cool'); </script>Copy the codeExcellent remote service plug-in
Axios: address entry: www.kancloud.cn/yunye/axios… Install using NPM:
$ npm install axios
Copy the codeUsing bower:
$ bower install axios
Copy the codeUse the CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Copy the codeExample performs the GET request
// create the request 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); });Copy the codePerforming a POST request
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Copy the codeExecute multiple concurrent requests
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) {// Both requests are now executed}));Copy the codeThe AXIOS API creates the request by passing the relevant configuration to AXIos
axios(config)
Copy the code// Send a POST request
axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }); Axios (url[, config]) // Send GET request (default method) axios('/user/12345');Copy the codeAlias for request methods For convenience, aliases are provided for all supported request methods
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]])
Copy the codeEncapsulate a font response change of its own
rem.js
// Set the font sizesetFontSize(){
(function(doc,win){var docEl = doc.documentElement, // Document root tag resizeEvent ='orientationchange' in window ? 'orientationchang' :'resize'; //viewport change event source var rescale =function(){// reset method win.clientWidth = docel.clientWidth;if(! win.clientWidth)return; // Change the DOM root fontSize; // (screen width/design width) = scale or enlarge value; docEl.style.fontSize = 40 * (win.clientWidth / 750) +'px';
}
if(! doc.addEventListener)return;
win.addEventListener(resizeEvent, rescale, false);
doc.addEventListener('DOMContentLoaded', rescale, false);
})(document, window);
}
Copy the codeRe-wrap the axios.post() and axios.get() methods yourself
axios_get_post.js
// eslint-disable-next-line /* eslint-disable */ / encapsulates axios from axios.get() and axios.post()'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'}) // Optionally, the above request can do axios.get('/user'{params: {ID: 12345}})'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} / / intercept processing axios. Interceptors. Request. Use ((the req) = > {if (req.method === 'post') {// Convert to JSON format req.data = qs.stringify(req.data); }return req;
}, (error) => Promise.reject(error));
axios(opt).then(res=>{
resolve(res.data)
}).catch(err=>{
reject(err)
})
})
}
Copy the codeThere was a problem with wrapping the above functions:
When axios.js passes data in post mode, it can’t get data in background
Mint-ui plugin use
The most used component in this project is MessageBox(), which is recommended for NPM installation and works better with the WebPack packaging tool.
npm i mint-ui@1 -S
Copy the codeCDN can obtain the latest version of resources from unpkg.com/mint-ui@1. You can start using it by introducing JS and CSS files on the page.
<! <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>Copy the codeHello World with CDN we can easily write a Hello World page using Mint UI.
<! 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> <! - the first to introduce the 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>Copy the codeThe Message box use
The introduction of
import { MessageBox } from 'mint-ui';
Copy the codeThe example calls with a title and content string as arguments
MessageBox(' info ', 'operation succeeded ');Copy the codeOr pass in an object
MessageBox({title: 'prompt ', message:' Sure to do this? ', showCancelButton: true });Copy the codeIn addition, MessageBox provides the alert, Confirm, and Prompt methods, all of which return a Promise
MessageBox.alert(message, title); Messagebox.alert (' operation successful '). Then (action => {... }); MessageBox.confirm(message, title); Messagebox.confirm (' Sure to do this? ').then(action => { ... }); MessageBox.prompt(message, title); Messagebox.prompt (' enter name '). Then (({value, action}) => {... });Copy the codeScroll to load the data component
Infinite scroll to introduce
import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);
Copy the codeExample add v-infinite-scroll to an HTML element to use infinite scroll. The method bound to the V-infinite Scroll instruction is triggered when the distance between the bottom of the scroll element and the bottom of the scroll element is less than a given threshold (set by infinite-scroll-distance).
<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);
}
Copy the codeIt also wraps a simple scroll load component
There was a previous blog post about this component: blog.csdn.net/qq_36772866… Also in zhihu wrote the same article: zhuanlan.zhihu.com/p/55123532
The code cloud addresses are as follows: gitee.com/kennana/vue… Only need: git clone https://gitee.com/kennana/vue_component.git
cdVue_component // Go to the vue_component directory NPM install // Run the command NPM run serve // Run the command to start the projectCopy the code 
The solutions to cross-domain problems are as follows
Vue.js requests backend encounters cross-domain detonations for this article
Vue CLI3 Local proxy configuration
Local proxy configuration for VUE-CLI3
Use vue-lazyload image lazy loading
Vue Lazyload plugin
Plugin address: github.com/hilongjw/vu…
Demo: hilongjw. Making. IO/vue – lazyloa…
2. Simple use example: this plug-in is pretty easy to use, is the feeling that the plug-in development document is a bit too long-winded, a head of all the API extensions are listed, the source code and no instances can be run to provide.
In fact, this plug-in is very simple to use, read the official documentation is misleading, you can first follow the example below to achieve a simple reference, and then according to the development document to do the extension.
- Install plug-in:
npm install vue-lazyload --save-dev
Copy the code- Main.js introduces plugins:
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
error:'./static/error.png',
loading:'./static/loading.png'
})
Copy the code- Change the image binding v-bind: SRC to V-lazy in the vue file
<img class="item-pic" v-lazy="newItem.picUrl"/>
Copy the codeVue – the use of the router
BeforeEach ((to, from, next)=>{beforeEach(to, from, next)=>{beforeEach(to, from, next)=>{if(to.path=='/'){// If you are about to enter the login page, go to next()}else{
if(to.meta.requiresAuth && !localStorage.getItem('token'){// Verify that the token exists // to.meta. RequiresAuth is true next({path:'/'})},else{
if(to.meta.title){ document.title = to.meta.title } next(); }}})Copy the coderouter.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: 'login'
},
},
{
name: 'register',
path: '/register',
component: ()=>import("./views/Register.vue"),
meta: {
title: "Registered"
}
},
{
name: 'addinfo',
path: '/addinfo',
component: ()=>import("./views/AddInfo.vue"),
meta: {
title: 'account',
requiresAuth: true,
}
},
{
name: 'editinfo',
path: '/editinfo/:id',
component: ()=>import("./views/EditInfo.vue"),
meta: {
title: 'edit',
requiresAuth: true,
}
},
{
name: 'showinfo',
path: '/showinfo',
component: ()=>import("./views/ShowInfo.vue"),
meta: {
title: 'Display information',
requiresAuth: true,
}
},
{
name: 'editriqi',
path: '/editriji',
component: ()=>import("./views/EditRiQi.vue"),
meta: {
title: 'Keep a journal',
requiresAuth: true
}
},
{
name: 'info',
path: '/info/:id',
component: ()=>import("./views/Info.vue"),
meta: {
title: 'Details',
requiresAuth: true}}}])Copy the codeThe problem is that the foreground sends data to the background, but the background cannot obtain the data. The data format is Request Payload
Recently, WHEN I was debugging code, I found that there was a Request Payload. I checked some files on the Internet, and there were many descriptions. I'm just going to show you what people don't notice about HTTP requests, which are all about sending data to the background through urls and parameters. The main methods are GET and POST. In both cases, the parameters of GET are placed after the URL and are commonly referred to as query parameters. The POST packets are stored in the BODY of HTTP packets in the format of query parameters, multipart parameters, and a JSON format, that is, Request Payload. Multipart, Request Payload Is distinguished by the ContentType of the Request Header. Multipart: ContentType: multipart/form-data; Boundary =-- XXXXXXX (Payload =-- XXXXXXX, Payload =-- XXXXXXX, Payload =-- XXXXXXX) The three formats are treated differently by application/ JSON in the background. The GET format comes after the URL, in key1=value1&key2=value2 KV format, and is not very long (the protocol specifies 1024 bytes, but browsers now make it longer). Synchronous processing can be used for background processing of such parameters, because the header receives all the parameters. The POST argument can also exist in the KV format above, but will be placed in the POST format. If the amount of data is small, it is also received together with the packet header. However, a large amount of data is split into multiple packets. Therefore, it must be collected asynchronously. The collection processing is the same as GET. For multipart format, you need to stream parsing because of the potential for large file uploads. In the RequestPayload format, it can also be sent asynchronously (this is not verified), but the amount of data is not very large. Therefore, it is a JSON format and can only be processed after all the packets are received. JSON format support is common, with functions to parse JSON strings and generate JSON objects directly, so this approach is the most convenient. Especially when using nodeJS Server, you can use it directly in your code.Copy the codeThe solution is:
import qs from "qs"
axios.interceptors.request.use((req) => {
if (req.method === 'post') {// Convert to JSON format req.data = qs.stringify(req.data); }return req;
}, (error) => Promise.reject(error));
Copy the codeThe difference between HTTP Request Payload and Form Data
www.cnblogs.com/xuzhudong/p… Blog.csdn.net/zwq91231883…
The two ways Axios passes parameters are Form Data and JSON strings (Form Data and Request Payload)
The first method: Form Datareturn request({
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
transformRequest: [function(data) {// Format data before request data = qs.stringify (data)return data
}],
url: '/test/add'// method:'post'// Request type params: {}, data: {'name': params.name, // Pass parameters'jobId': params.jobId,
'department': params.department,
'phone': params.phone,
'position ': params.position,
'permis': params.permis,
'entryTime': params.entryTime
}
})
Copy the codeSecond method: Json stringreturn 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, // Pass parameters'jobId': params.jobId,
'department': params.department,
'phone': params.phone,
'position ': params.position,
'permis': params.permis,
'entryTime': params.entryTime
}
})
Copy the codeThe front desk will finish the backstage
PHP cannot retrieve data from the foreground post
The reason is that the content-type is set to payloadCopy the codePHP accepts POST data in three ways
In Web development, when a user uses a browser to POST data to the server, we use PHP to accept the data that the user posts to the server, and parse and process the data accordingly. Here are a few ways PHP accepts POST data:$_POSTWay to receive data$_POSTThe method is an array of data passed through the HTTP POST method and is an automatic global variable. Note: Only content-Type :application/ X-www-form-urlenCode submissions can be accepted. You can only receive data from a form POST. GLOBLES[' HTTP_RAW_POST_DATA '] can be used if accessing raw POST data is not a document type that PHP recognizes, such as text/ XML, soap, etc$GLOBLES[' HTTP_RAW_POST_DATA '],$HTTP_RAW_POST_DATAThe variable contains raw POST data. This variable is generated only when unrecognized MIME data is encountered. Note:$HTTP_RAW_POST_DATAFor encType = "multipart/form-data" form data is not available, that is, use$HTTP_RAW_POST_DATAUnable to accept data from web form post. 3. File_get_content (" PHP: / / input "); A better way to access raw POST data is to use file_get_content(" PHP ://input "); This method can be used to read POST raw data, including binary streams, for POST data with no specified Content-Type. and$HTTP_RAW_POST_DATAIt is much smaller in terms of survival and does not require any special php.ini Settings. Note: PHP ://input cannot be used with encType = "multipart/form-data". Such as:$postStr = file_get_contents("php://input"); // Get the POST data. 1.MIME data types: Multipurpose Internet Mail Extension (MIME) is an Internet standard that extends the E-mail standard to support ASCII characters. Mail messages in various formats such as binary attachments. MIME specifies symbolic methods for representing a wide variety of data types. In addition, the MIME framework is also used in the HTTP protocol used in the World Wide Web. Raw data: Raw data is unprocessed data that needs to be extracted, organized, and even analyzed and formatted before it can be presented to others.Copy the codePHP header function setting content-type
// Define the encoding 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('the HTTP / 1.1 200 OK'); // Set a 404 header: header('the HTTP / 1.1 404 Not Found'); // Set the address to be permanently redirected.'the HTTP / 1.1 301 version Permanently'); // Go to a new address header('Location: http://www.example.org/'); // File delay: header('Refresh: 10; url=http://www.example.org/');
print 'You will be redirected in 10 seconds'; // <meta http-equiv="refresh" content="10; http://www.example.org/ /> // override x-powered-by: PHP: header(' x-powered-by: PHP/4.4.0'); The header (' X - Powered - By: Brian / 0.6 b '); // Document language header(' content-language: en'); // Tells the browser when it was last modified$time = time() - 60; // or filemtime($fn), etc
header('Last-Modified: '.gmdate('D, d M Y H:i:s', $time).' GMT'); // Tell the browser that the content of the document has Not changed header('HTTP/1.1 304 Not Modified'); // Set the Content Length header(' content-length: 1234'); // Set it to a download Type 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'); // Disable Cache 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'); // Set the Content Type: header(' content-type: text/ HTML; charset=iso-8859-1'); header('Content-Type: text/html; charset=utf-8'); header('Content-Type: text/plain'); // Plain text header(' content-type: image/jpeg'); //JPG*** header('Content-Type: application/zip'); // ZIP header(' content-type: application/ PDF '); // PDF file header(' content-type: audio/mpeg'); // Audio file header(' content-type: application/x-shockw**e-flash'); // Display the login dialog 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';Copy the codeDownload the XLSX file
$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);
Copy the codePHP namespace learning
zhuanlan.zhihu.com/p/53981022
PHP empty is different from unset
zhuanlan.zhihu.com/p/54716875
Alibaba cloud server ubantu14.04 deployed lavaral5.7 blog
zhuanlan.zhihu.com/p/54818773
Ubuntu14.04 Apache modified the root directory and the default page
zhuanlan.zhihu.com/p/54867843
Fetch_array/ASsoc /row/object in mysql database
zhuanlan.zhihu.com/p/55029525
A few PHP applications for writing open source projects today
zhuanlan.zhihu.com/p/55169371
PHP generate token
Blog.csdn.net/panxiaomao1…
Mysql storage engine
zhuanlan.zhihu.com/p/55226412
Mysql > select * from ‘mysql’
zhuanlan.zhihu.com/p/55256359
Mysql learns the (3) operator
zhuanlan.zhihu.com/p/55265206
Mysql > select * from ‘mysql’
zhuanlan.zhihu.com/p/55279412
Open source project mobile billing this interface documentation
Login interface login. vue every page must be authenticated. If he is not logged in, no matter which page he visits, he will jump to the home page for Login
Request {user_name: String User name, user_pass: String Password} Response Click a request To log in to the foreground Record Local cache user name Cache user ID Cache Token authentication cache User profile picture IMG cache {code: int 0: successful, other: failed, user_id: Int user ID, user_name: string User nickname, user_img: string User profile picture, message:"Login successful", token: string,} If the user login without registered, remind the user to registerCopy the codeRegister page register.vue
Request {user_name: String User name, user_pass: String Password} Writes the user name to the local cache. Response Response {user_id: int USER ID, user_name: string User nickname, code: int 0 indicates success, and other values indicate failure.} After the token is written into the cache, the login page is displayedCopy the codeBookkeeping page addinfo.vue
Request {date: string date, morning: string cost for breakfast, afternoon: string cost for lunch, evening: string cost for dinner, other: String other costs, token: string token authentication, userid: int userid}Copy the codeMessage: string User prompt, user_id: int USER ID, id: int ID of data insertion}Copy the codeEdit editinfo.vue
Request initialization request {userid: int userid, editid: int editid, token: string authentication,} reponse initialization, return a specific piece of data {userid: Int user id, editid: int editid, code: int 0 indicates success, other indicates failure, date: string date, morning: string breakfast cost, afternoon: String cost for lunch, evening: string cost for dinner, other: string Other cost, MSG:"Hints"} Request {date: string date, morning: string breakfast cost, afternoon: string lunch cost, evening: string dinner cost, other: String other costs, userid: int userid, editid: int editid, token: string authentication,} reponse response after modification {userid: int userid, editid: Int edit id, code: int 0, code: int failure, MSG:"Hints",}Copy the codeShow the bookkeeping brief information showinfo.vue
Request initializing request {userid: int userid, page: int number of pages, count: int number of pages displayed on a page, token: string authentication,} reponse initializing to return a specific piece of data {userid: Int User ID, code: int 0 indicates success, other indicates failure, data: [{id: int, date: string Date, path: string Avatar}, {id: int, date: String date, path: string avatar}, {id: int, date: string Avatar}], MSG:"Hints"} request request {date: string date, userid: int userid, editid: int editid, token: string authentication,} reponse response after modification {userid: string Int user id, editid: int editid, code: int 0 indicates success, other indicates failure, MSG:"Hints",}Copy the codeThe detailed information info.vue is displayed
Request request {userid: int userid, infoid: int information id, token: string authentication,} response response {userid: int userid, editid: Int edit ID, code: int 0 indicates success, other indicates failure, date: string Date, morning: string breakfast cost, afternoon: string lunch cost, evening: String dinner expenses, other: string Other expenses, MSG:"Hints"
}
Copy the codeWrite a diary EditRiQi. Vue
Request {userid: int userid, content: string diary content, token: string authentication} reponse response {userid: int userid, code: Int 0 indicates success, other indicates failure, MSG:"Hints"
}
Copy the codeLearn a little mint-UI
My code cloud address: gitee.com/kennana/min…
Today we looked at pull-up load data components
Blog.csdn.net/qq_36772866…
The final interface is as follows:
The login
Charge to an account
According to the information
The editor
The detailed information
The front desk code
Gitee.com/kennana/mob…
git clone https://gitee.com/kennana/mobile_account_book.git
cd mobile_account_book
npm install
npm run serve
Copy the codeThe background code
Gitee.com/kennana/acc…
git clone https://gitee.com/kennana/accounting_backstage.git
Copy the codeJob summary
Gitee.com/kennana/wor…
https://gitee.com/kennana/work_summary.git
Copy the code