Uniapp项目模板

何平安2024-09-292024-09-29

项目目录架构：

request.js

export default {
  //GET请求
  get(url, data = {}, header = {}) {
    return this.request('GET', "http://127.0.0.1:8601"+url, data, header);
  },

  //POST请求
  post(url, data = {}, header = {}) {
    return this.request('POST', "http://127.0.0.1:8601"+url, data, header);
  },

  //封装uni.request
  request(method, url, data, header) {
    return new Promise((resolve, reject) => {
      uni.request({
        url: url,
        method: method,
        data: data,
        header: header,
        success: (res) => {
          // 这里可以对响应结果进行预处理
          if (res.statusCode === 200) {
            resolve(res.data);
          } else {
            // 这里可以根据实际情况处理错误
            reject(res);
          }
        },
        fail: (err) => {
          // 这里处理请求失败
          reject(err);
        }
      });
    });
  }
}

修改下http的链接就行，这是向后端发送请求的封装

使用封装类例子

GET（后端使用@RequestParam接收）：

1
2
3

request.get('/seat/getList?hall='+hall).then(res =>{
		list.value = res.data
	})

GET(后端使用@PathVariable接收):

1
2
3

request.get('/seat/getList/'+hall).then(res =>{
		list.value = res.data
	})

POST（后端使用@RequestBody接收）：

const form = ref({
	"line": '',
	"vertical": '',
	"hall": ''
})

function submit(){
	request.post('/seat/addHall',form.value).then(res =>{
		if(res === "ok"){
			toast.show('添加成功')
		}else{
			toast.show('添加失败，或许已经有重复数据了?')
		}
	})
	
}

vue.config.js

module.exports = {
    // 配置路径别名
    configureWebpack: {
        devServer: {
            // 调试时允许内网穿透，让外网的人访问到本地调试的H5页面
            disableHostCheck: true
        }
    }
    // productionSourceMap: false,
}

main.js

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}

// #endif

就是HBuilder默认创建的

pages.json

{
	"easycom": {
			"autoscan": true,
			"custom": {
			  "^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
			}
		},
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				"enablePullDownRefresh": true
			}
		},
		{
			"path": "pages/index/test",
			"style": {
				"navigationBarTitleText": "uni-app2"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}