This project pure open source free, commodity information from the network, if there is infringement, please contact the author, I will delete in time!

Some time ago, I saw ding Dong buy vegetables written by a big man, it was very good, so I thought about it at home and made a version of it to record the development of uni-App. It is purely a personal summary, if there is anything wrong, please advise me! The function is not very comprehensive, later decided as a series, continue to update

I. Preview:

Online preview address: dingdong.nodebook.top/

Making: github.com/cgq001/ding…

Admin background: dingdong-admin.nodebook.top/

If you’re ok with that, how about a start? I will continue to work hard to improve the project and strive for complete open source front and back

1. The first page

Classification of 2.

3. Add to cart

4. Delivery address

5. My

Ii. Project Introduction

1. The vant Ui library

Use the H5 Ui library in UNI-App this site uses the H5 Ui library of Vant (please use the Vant applet edition for packaging applets and apps)

npm init # Initialize package.json file
npm i vant -S Install the H5 version of Vant via NPM
Copy the code

Use of vant H5 version (global introduction)

main.js

import Vant from 'vant';

Vue.use(Vant);

// Register vant, note that there is no vant style file introduced here, importing style file in main.js will cause an error, please introduce it in app.vue
Copy the code

App.vue

<style>
	@import 'vant/lib/index.css';
</style>
Copy the code

2. Colorui UI library

Personally like the cool style effect of this library, please download the UI library file from its official website: www.color-ui.com/

Simple encapsulation of requests in UNI-app

1. Simple encapsulation

import store from './state/index.js'  //vuex

// Encapsulate request methods without tokens
const request = (url, method, data) = > {
    var promise = new Promise((resolve, reject) = > {
        // A hint
        uni.showLoading({
            title: 'Loading... '
        })
        // Network request
        uni.request({
            url: store.state.user.http+url, //store.state.user. HTTP is the address of the public interface
            data: data,
            method: method,
            header: {},success: function (res) {
                uni.hideLoading()
                // The server returns data
                if (res.statusCode == 200) {
          
					if(res.data.code === 0 && res.data.msg){
						uni.showToast({
						    title: res.data.msg,
							icon: 'success'.duration: 2000})}else if(res.data.code ! =0 && res.data.msg){
						uni.showToast({
						    title: res.data.msg,
							icon: 'none'.duration: 2000
						});
					}
					
					 resolve(res);
                } else {
                    An error message is displayedreject(res.data); }},fail: function (e) {
                 uni.hideLoading()
				uni.showToast({
				    title: 'Network connection error'.icon: 'loading'.duration: 2000
				});
                reject('Network error'); }})});return promise;
}
// Encapsulate request with token
const requests = (url, method, data={}) = > {
    var promise = new Promise((resolve, reject) = > {
        // The loading animation can be started as required
        // uni.showLoading({
        // title: 'Loading... '
        // })
		Console. log(store.state.user.token) // Obtain the token information from vuex to determine whether to log in
		if(! store.state.user.token || store.state.user.token ===null ){
			uni.navigateTo({
			    url: '/pages/login/login'
			});
			
			return false;
		}
        // Network request
        uni.request({
            url: store.state.user.http+url, //store.state.user. HTTP is the address of the public interface
            data: data,
			header: {"Authorization":store.state.user.token  //'Bearer '+
			},
            method: method,
            success: function (res) {
                uni.hideLoading()
                // The server returns data
                if (res.statusCode == 200) {
					if(res.data.code === 400){
						uni.navigateTo({
						    url: '/pages/login/login'
						});
						
						return false;
					}
					// Response prompt according to code judgment and MSG prompt text
					if(res.data.code === 0 && res.data.msg){
						uni.showToast({
						    title: res.data.msg,
							icon: 'success'.duration: 2000})}else if(res.data.code ! =0 && res.data.msg){
						uni.showToast({
						    title: res.data.msg,
							icon: 'none'.duration: 2000
						});
					}
					
					 resolve(res);
                } else {
					
					console.log("Request error")
                    An error message is displayedreject(res.data); }},fail: function (e) {
				
                 uni.hideLoading()
				uni.showToast({
				    title: 'Network connection error'.icon: 'loading'.duration: 2000
				});
                reject('Network error'); }})});return promise;
}
// Here we export two requests one containing Token and one containing Token
module.exports = {
    request:request,
	requests:requests
}
Copy the code

2. A mount

import Vue from 'vue'
import App from './App'
import store from './static/state/index.js'
Vue.config.productionTip = false

// Import the wrapped request file
const https = require('./static/http.js')
// Mount to Vue instance
// No token request
Vue.prototype.http = https.request
// Request with token
Vue.prototype.https = https.requests

import Vant from 'vant';

Vue.use(Vant);

App.mpType = 'app'

const app = newVue({ store, ... App }) app.$mount()Copy the code

Use 3.

//this. HTTPS indicates token-containing requests
//this. HTTP indicates a tokenless request

this.https('index/addOrder'.'post',src) // request address, request type, data)
	.then(res= >{	
       
	})
	.catch(err= >{})Copy the code