一個(gè)基于uniapp+node.js+mysql的個(gè)人相冊(cè)小程序
前端使用uniapp,后端接口使用node.js編寫,數(shù)據(jù)庫使用mysql
相比之前,這個(gè)項(xiàng)目寫得比較規(guī)范一點(diǎn),也是學(xué)習(xí)和練習(xí)的作品
程序介紹
學(xué)習(xí)node.js順便接的400元單子,前后端都是自己寫,相比自己以前寫的,這次相對(duì)來說比較規(guī)范,用于個(gè)人相冊(cè)展示,適合微商,有客服聯(lián)系,無需后臺(tái)管理系統(tǒng),小程序上直接進(jìn)行管理,沒有登錄賬號(hào)只擁有查看功能。
功能介紹
1.首頁進(jìn)行相冊(cè)展示,采用分頁
2.列表頁面以文字形式進(jìn)行分類,管理員可進(jìn)行添加,修改和排序
3.每個(gè)列表下有多個(gè)相冊(cè),管理員可進(jìn)行添加,修改和排序
4.每個(gè)相冊(cè)有多張圖片,有小圖和大圖模式進(jìn)行切換
5.相冊(cè)中可以長(zhǎng)按圖片進(jìn)行選擇刪除和設(shè)為封面
6.相冊(cè)可以進(jìn)行分享
7.我的頁面有管理員登錄,聯(lián)系客服等功能
開發(fā)語言
前端:uniapp
后端:node.js
數(shù)據(jù)庫:mysql5.7
圖片存儲(chǔ):七牛云
開發(fā)軟件
HBuilder X
安裝教程
1.上傳server文件夾到服務(wù)器
2.修改config/conn.js文件里的mysql配置信息var pool = mysql.createPool({[/size][/font][/color]
[size=16px][font=Microsoft YaHei, SF Pro Display, Roboto, Noto, Arial, PingFang SC, sans-serif][color=#4d4d4d] host: '127.0.0.1',//數(shù)據(jù)庫地址
user:'root',//數(shù)據(jù)庫賬號(hào)
password:'root',//數(shù)據(jù)庫密碼
database:'album'//數(shù)據(jù)庫名
});
3.修改config/qiniu.js文件里的七牛云配置信息qiniu_sdk.conf.ACCESS_KEY = "xxx"
qiniu_sdk.conf.SECRET_KEY = "xxx"
qiniu_sdk.conf.url="xxxx" //七牛云綁定域名
// 要上傳的空間名
const bucket = "xxxx"
4.使用命令或者PM2管理器運(yùn)行sever文件夾下的main.jsnode main.js
5.若安裝失敗,可能是沒有依賴原因,需要先安裝依賴npm install
安裝完成后重新執(zhí)行第4的步驟運(yùn)行
6.導(dǎo)入mysql數(shù)據(jù)庫
如果導(dǎo)入失敗,嘗試一下用工具連接數(shù)據(jù)庫,使用工具導(dǎo)入。
7.修改前端接口請(qǐng)求地址,改成自己服務(wù)器的接口地址,/App.vue
要注意小程序必須要使用https,node.js運(yùn)行起來是以端口號(hào)的形式訪問,所以需要用反向代{過}{濾}理,把ip指向域名。globalData: {
//url: 'http://192.168.1.12:10001/'
url: 'https://ablum.q05.cc/'
}
8.使用HBuilder X 發(fā)布到微信小程序即可
![圖片[1]-微商個(gè)人相冊(cè)多端小程序源碼以及安裝](http://www.oilmaxhydraulic.com.cn/wp-content/uploads/2022/02/0d96df03e590.png)
暫無評(píng)論內(nèi)容