设计 任务书 文档 开题 答辩 说明书 格式 模板 外文 翻译 范文 资料 作品 文献 课程 实习 指导 调研 下载 网络教育 计算机 网站 网页 小程序 商城 购物 订餐 电影 安卓 Android Html Html5 SSM SSH Python 爬虫 大数据 管理系统 图书 校园网 考试 选题 网络安全 推荐系统 机械 模具 夹具 自动化 数控 车床 汽车 故障 诊断 电机 建模 机械手 去壳机 千斤顶 变速器 减速器 图纸 电气 变电站 电子 Stm32 单片机 物联网 监控 密码锁 Plc 组态 控制 智能 Matlab 土木 建筑 结构 框架 教学楼 住宅楼 造价 施工 办公楼 给水 排水 桥梁 刚构桥 水利 重力坝 水库 采矿 环境 化工 固废 工厂 视觉传达 室内设计 产品设计 电子商务 物流 盈利 案例 分析 评估 报告 营销 报销 会计
Logo 顶部广告
首页 | 机械毕业设计 | 电子电气毕业设计 | 计算机毕业设计 | 土木工程毕业设计 | 视觉传达毕业设计 | 理工论文 | 文科论文 | 毕设资料 | 帮助中心
今天是： |>>> 您现在的位置：首页>>>>文档详细内容
标题：

基于VUE +CSS3+SASS+ElementUI+Node+MySql的前后端分离复杂数据库应用

ВНжш7ЃКдкcomponentsжааТНЈвЛИіУћЮЊЁАAlbumContent.vueЁБЕФзщМўЃЌЦфЭъећДњТыШчЯТЁЃ

ВНжш8ЃКдкcomponentsжааТНЈвЛИіУћЮЊЁАContentList.vueЁБЕФзщМўЃЌЦфЭъећДњТыШчЯТЁЃ

ВНжш9ЃКдкpagesЮФМўМаЯТаТНЈвЛИіУћЮЊЁАHome.vueЁБЕФвГУцМЖзщМўЃЌЦфЭъећДњТыШчЯТЁЃ

ВНжш10ЃКдкpagesЮФМўМаЯТаТНЈвЛИіУћЮЊЁАSinger.vueЁБЕФвГУцМЖзщМўЃЌЦфЭъећДњТыШчЯТЁЃ

ВНжш11ЃКдкpagesЮФМўМаЯТаТНЈвЛИіУћЮЊЁАSingerAlbum.vueЁБЕФвГУцМЖзщМўЃЌЦфЭъећДњТыШчЯТЁЃ

ВНжш12ЃКНЋrouterЮФМўМажаЕФIndex.jsЮФМўЕФФкШнИФЮЊШчЯТДњТыЃК

import Vue from 'vue'

import Router from 'vue-router'

import Home from '@/pages/Home'

import SongList from '@/pages/SongList'

import Singer from '@/pages/Singer'

import SongListAlbum from '@/pages/SongListAlbum'

import SingerAlbum from '@/pages/SingerAlbum'

import Lyric from '@/pages/Lyric'

Vue.use(Router)

export default new Router({

routes: [

{

path: '*',

redirect: '/404'

},

{

path: '/404',

component: resolve => require(['../pages/404.vue'], resolve)

},

{

path: '/',

name: 'home',

component: Home

},

{

path: '/song-list',

name: 'song-list',

component: SongList

},

{

path: '/song-list-album/:id',

name: 'song-list-album',

component: SongListAlbum

},

{

path: '/singer',

name: 'singer',

component: Singer

},

{

path: '/singer-album/:id',

name: 'singer-album',

component: SingerAlbum

},

{

path: '/lyric/:id',

name: 'lyric',

component: Lyric

}

],

scrollBehavior (to, from, savedPosition) {

return { x: 0, y: 0 }

}

})

ВНжш13ЃКНЋИљзщМўApp.vueЕФДњТыаоИФЮЊШчЯТДњТыЁЃ

ВНжш14ЃКНЋИљзщМўmain.jsЕФДњТыаоИФЮЊШчЯТДњТыЁЃ

import Vue from 'vue'

import App from './App'

import router from './router'

import store from './store/index'

import './assets/css/index.scss'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import '@/assets/js/iconfont.js'

import '@/assets/js/iconfont1.js'

import '@/assets/js/iconfont2.js'

import '@/assets/js/iconfont3.js'

Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

store,

components: { App },

template: ''

})

ВНжш15ЃКБЃДцвдЩЯЮФМўжЎКѓЃЌдкcmdУќСюДАПкжаЃЌАДCtrl+CЭЃжЙЗўЮёЃЌШЛКѓmusic-clientФПТМЯТдйДЮдЫааnpm run devЃЌЗЕЛиЙШИшфЏРРЦїжаЃЌдкЕижЗЮЊЁАhttp://localhost:8080/#/ЁБЕФЧАЖЫвГУцЃЌЗЂЯжЙШИшфЏРРЦїЕФПижЦЬЈжаБЈ404ДэЮѓЃЌетЪЧвђЮЊЧАЖЫвГУцЕФ8080ЖЫПкКЭКѓЖЫЗўЮёЦїЕФ8888ЖЫПкЪЧСНИіВЛЭЌЕФЖЫПкЃЌПчгђСЫЁЃетЪБКђЃЌевЕНЧАЖЫЁАmusic-clientЁБЯюФПжаЕФconfigЮФМўМажаЕФЮФМўindex.jsЃЌПЩвдПДЕНЃЌд­БОдкПЊЗЂХфжУdevРяУцЕФЕижЗгГЩфБэproxyTableЕФФкШнЮЊПеЃЌЯждкаоИФЮЊШчЯТДњТыЁЃ

proxyTable: {

'/api': {

target: 'http://127.0.0.1:8888',  //ЧыЧѓЕФФПБъЗўЮёЦїНгПк

changeOrigin: true,           //trueдЪаэПчгђ

pathRewrite: {                //жиаДЧыЧѓ

//ЬцЛЛtargetжаЕФЧыЧѓЕижЗЃЌвВОЭЪЧЫЕдкЧыЧѓ

//http://127.0.0.1:8888/XXXXXетИіЕижЗЕФЪБКђжБНгаДГЩ/apiМДПЩЁЃ

'^/api': '/api'

}

}

},

БЃДцвдЩЯЮФМўКѓЃЌдкcmdУќСюДАПкжаЃЌАДCtrl+CЭЃжЙЗўЮёЃЌдкmusic-clientФПТМЯТЕФУќСюДАПкжаЃЌдйДЮдЫааnpm run devЃЌШЛКѓдйВщПДЧАЖЫвГУцЃЌдЫаааЇЙћШчЭМ5.5ЫљЪОЃЈзЂвтАДF12ВщПДЙШИшфЏРРЦїПижЦЬЈЕФДђгЁаХЯЂЃЉЃЌБэУїдЫааГЩЙІЃЁ

ЁЖWebЧАЖЫАИР§ЩшМЦЁЗЪЕбщжИЕМЪщ

ЛљгкVUE +CSS3+SASS+ElementUI+Node+MySql

ЕФЧАКѓЖЫЗжРыИДдгЪ§ОнПтгІгУ

1. ЙЎЙЬКЭеЦЮеCSS3ЕЏадКазгВМОжЕФдЫгУММЧЩЁЃ

2. ЪьЯЄКЭеЦЮеSASSБрГЬЪНВуЕўбљЪНБэММЪѕЕФдЫгУММЧЩЁЃ

3. ЪьЯЄКЭеЦЮеЛљгкVUE +CSS3 Flex+SASS+ElementUI +Node+MySqlЕФЧАКѓЖЫЗжРыЪ§ОнПтгІгУЕФБрГЬЗНЗЈЁЃ

ЖўЁЂЪЕбщФкШн

ВНжш1ЃКШЗБЃвбО­АВзАКУСЫnodeЁЂwebpackЁЂvue-cli2.x, VSCodeжавбО­АВзАСЫVeturРЉеЙЁЃ

ВНжш2ЃКдкMySQLжаДДНЈЪ§ОнПтКЭЪ§ОнПтБэЁЃ

ЪзЯШШЗБЃЕчФдЩЯвбО­АВзАКУСЫMySQLЪ§ОнПтМАЦфЙмРэЙЄОпNavicat for MySQLЃЌШЛКѓЃЌЪЙгУNavicat for MySQLДДНЈвЛИіУћГЦЮЊЁАtp_musicЁБЪ§ОнПтЃЌШЛКѓдкИУЪ§ОнПтжажДааЪЕбщЮхИНМўDBЮФМўМажаИјГіЕФЁАtp_music.sqlЁБЮФМўДДНЈЫљашЪ§ОнПтБэВЂВхШыЪ§ОнЁЃ

ВНжш3ЃКДюНЈExpress WebЗўЮёЦїЁЃ

дкеОЕуЮФМўМаЯТЃЈШчg:\vue\musicWebsiteClient\test1\ЃЉаТНЈвЛИіЮФМўМаserverЃЌгУгкДцЗХExpress WebЗўЮёЦїЕФЯрЙиЮФМўЁЃдкserverФПТМЕФУќСюДАПкжажДаавдЯТжИСюЃЌГѕЪМЛЏpackage.jsonЃЌИУЮФМўЪЧNodeJSдЄЖЈЕФгУРДДцЗХЯюФПЕФаХЯЂКЭХфжУЕШаХЯЂЕФЮФМўЁЃ

npm init -y

ШЛКѓдкVSCodeжаДђПЊserverЮФМўМаЃЌВЂАДЭМ5.1ЫљЪОЕФНсЙЙДДНЈЮФМўМаКЭЮФМўЁЃ

ЭМ5.1 serverЮФМўМаЕФФПТМНсЙЙ

ШЛКѓЃЌНЋЪЕбщЮхИНМўжаserverЮФМўМаРяЕФimgЮФМўМаРяЕФЫљгаЮФМўМаКЭЫљгаЮФМўећЬхПНБДЕНИеИеДДНЈЕФimgЮФМўМаРяЃЌНЋЪЕбщЮхИНМўжаserverЮФМўМаЕФsongЮФМўМаРяЕФЫљгаЮФМўећЬхПНБДЕНИеИеДДНЈЕФsongЮФМўМаРяЁЃ

дкserverЮФМўМаЯТЕФУќСюДАПкжДаавдЯТДњТыЃЌЭЌЪБАВзАexpressЁЂmysqlКЭbody-parserЁЃ

npm install express mysql body-parser

АВзАГЩЙІКѓЃЌдкnode_modulesжаПЩвдПДЕНвдЩЯИеИеАВзАЕФШ§ИівРРЕАќЕФЮФМўМаЁЃ

ШЛКѓЃЌвРДЮБраДвдЩЯИеИеаТНЈЕФ4ИіЮФМўЃЌЗжБ№ЮЊЃКindex.jsЁЂDBHelper_Music.jsЁЂsqlMap_Music.jsЁЂmusicApi.jsЁЃет4ИіЮФМўЕФзїгУКЭДњТыЫЕУїШчЯТЁЃ

ЃЈ1ЃЉindex.jsЮФМў

index.jsЪЧExpressЗўЮёЦїЕФШыПкЮФМўЃЌДњТыШчЯТЁЃ

// nodeКѓЖЫЗўЮёЦї

const http = require('http');

const badyParser = require('body-parser');

const express = require('express');

const musicApi = require('./api/musicApi');

let app = express();

let server = http.createServer(app);

// НтЮіbodyЪ§Он

app.use(express.json())

// ЭаЙмОВЬЌЮФМў

app.use('/img/singerPic', express.static(__dirname + '/img/singerPic'))

//ЯТУцЪЧЮЊСЫНгЪмhttpЧыЧѓЗўЮёЦїБОЕиЮФМўзіЕФЩшжУЃЁживЊЃЁ

app.get('/song/*', function (req, res) {

res.sendFile( __dirname + "/" + req.url );

console.log("Request for " + req.url + " received.");

})

app.get('/public/img/*', function (req, res) {

res.sendFile( __dirname + "/" + req.url );

console.log("Request for " + req.url + " received.");

})

app.get('/img/singerPic/*', function (req, res) {

res.sendFile( __dirname + "/" + req.url );

console.log("Request for " + req.url + " received.");

})

app.get('/img/songPic/*', function (req, res) {

res.sendFile( __dirname + "/" + req.url );

console.log("Request for " + req.url + " received.");

})

app.get('/img/songListPic/*', function (req, res) {

res.sendFile( __dirname + "/" + req.url );

console.log("Request for " + req.url + " received.");

})

app.get('/img/*', function (req, res) {

res.sendFile( __dirname + "/" + req.url );

console.log("Request for " + req.url + " received.");

})

app.use(badyParser.json());

app.use(badyParser.urlencoded({

extended: false

}));

// КѓЖЫapiТЗгЩ

app.use('/api/music',musicApi);

// ЦєЖЏМрЬ§

server.listen(8888, () => {

console.log(' success!! port:8888')

})

ЃЈ2ЃЉDBHelper_Music.jsЮФМў

DBHelper_Music.jsгУРДСЌНгMySQLЪ§ОнПтЃЌДњТыШчЯТЃЈзЂвтЃКpasswordЕФШЁжЕИљОнMySQLАВзАЕФЪЕМЪЧщПіОіЖЈЃЉЁЃ

// Ъ§ОнПтСЌНгжњЪж

const mysql = require('mysql');

class DBHelper_Music{

// ЛёШЁЪ§ОнПтСЌНг

getConn(){

let conn = mysql.createConnection({

// Ъ§ОнПтСЌНгХфжУ

host:'localhost',

port:'3306',

user:'root',

password:'',

database:'tp_music'  // Ъ§ОнПтУћ

});

conn.connect();

return conn;

}

}

module.exports = DBHelper_Music;

ЃЈ3ЃЉsqlMap_Music.jsЮФМў

sqlMap_Music.jsЮФМўгУгкЭГвЛЩшжУSQLгяОфгГЩфЃЌвдЙЉhttpЧыЧѓДІРэЮФМўЕїгУЪЙгУЃЌетбљБугкаоИФЮЌЛЄSQLгяОфЃЌДњТыШчЯТЁЃ

// sqlгяОф

var sqlMap = {

singer:{

getsingers:'select * from singer',

getSingerOfSex:'select * from singer where sex=?'

},

song:{

getSongOfSingerId:'select * from song where singer_id=?'

},

songlist:

{

getsonglist:'select * from song_list',

getsonglistOfStyle:'select * from song_list where style=?'

},

//listSong:ИшЕЅЕФИшЧњаХЯЂЃЌИшЕЅЪЧЁАзЈМ­ЁБЕФвтЫМ

listSong:{

getSongListOfId:'select * from list_song where song_list_id=?',

getSongOfId:'select * from song where id=?'

},

//ИшЕЅЦРЗж

rank:{

//ВщбЏИшЕЅIdЦРМлЦНОљЗж

getRankOfId:'select avg(score) as avgscore from rank where songListId=?'

}

}

module.exports = sqlMap;

ЃЈ4ЃЉmusicApi.jsЮФМў

ШчЧАЫљЪіЃЌmusicApi.jsЪЧhttpЧыЧѓТЗгЩЮЊЁЏ /api/musicЁЏЪБЕФjsДІРэЮФМўЃЌДњТыШчЯТЁЃ

const express = require('express');

const router = express.Router();

const sql_Music = require('../sqlMap_Music');

const DBHelper_Music = require('../utils/DBHelper_Music');

//api/music/getSongOfSingerId

router.post('/getSongOfSingerId', (req, res) => {

let sqlStr = sql_Music.song.getSongOfSingerId;

let conn = new DBHelper_Music().getConn();

let params = req.body;

conn.query(sqlStr,[params.id],(err, result) => {

if (err) {

res.json(err);

} else {

res.json(result)

}

});

conn.end();

});

// ВщбЏЫљгаИшЪж

router.post('/getallsingers', (req, res) => {

let sqlStr = sql_Music.singer.getsingers;

let conn = new DBHelper_Music().getConn();

conn.query(sqlStr, (err, result) => {

if (err) {

res.json(err);

} else {

res.json(result)

}

});

conn.end();

});

// АДадБ№/РрБ№ВщбЏИшЪж

router.post('/getSingerOfSex', (req, res) => {

let sqlStr = sql_Music.singer.getSingerOfSex;

let conn = new DBHelper_Music().getConn();

let params = req.body;

conn.query(sqlStr,[params.singersex],(err, result) => {

if (err) {

res.json(err);

} else {

res.json(result)

}

});

conn.end();

});

// ВщбЏЫљгаИшЕЅ

router.post('/getsonglist', (req, res) => {

let sqlStr = sql_Music.songlist.getsonglist;

let conn = new DBHelper_Music().getConn();

conn.query(sqlStr, (err, result) => {

if (err) {

res.json(err);

} else {

res.json(result)

}

});

conn.end();

});

//getsonglistOfStyle

router.post('/getsonglistOfStyle', (req, res) => {

let sqlStr = sql_Music.songlist.getsonglistOfStyle;

let conn = new DBHelper_Music().getConn();

//songstyle

let params = req.body;

conn.query(sqlStr,[params.songstyle],(err, result) => {

if (err) {

res.json(err);

} else {

res.json(result)

}

});

conn.end();

});

//getSongOfId

router.post('/getSongOfId', (req, res) => {

let sqlStr = sql_Music.collect.getSongOfId;

let conn = new DBHelper_Music().getConn();

let params = req.body;

conn.query(sqlStr,[params.id],(err, result) => {

if (err) {

res.json(err);

} else {

res.json(result)

}

});

conn.end();

});

//api/music/getSongListOfId

router.post('/getSongListOfId', (req, res) => {

let sqlStr = sql_Music.listSong.getSongListOfId;

let conn = new DBHelper_Music().getConn();

let params = req.body; //id

console.log(params.id)

conn.query(sqlStr,[params.id],(err, result) => {

if (err) {

res.json(err);

} else {

res.json(result)

}

});

conn.end();

});

//api/music/getSongAllOfId

router.post('/getSongAllOfId', (req, res) => {

let sqlStr = sql_Music.listSong.getSongOfId;

console.log(sqlStr)

let conn = new DBHelper_Music().getConn();

let params = req.body; //id

console.log(params.id)

conn.query(sqlStr,[params.id],(err, result) => {

if (err) {

res.json(err);

} else {

res.json(result)

}

});

conn.end();

});

//api/music/getRankOfId

router.post('/getRankOfId', (req, res) => {

console.log("enter getRankOfId!")

let sqlStr = sql_Music.rank.getRankOfId;

console.log(sqlStr)

let conn = new DBHelper_Music().getConn();

let params = req.body; //id

console.log(params.id)

conn.query(sqlStr,[params.id],(err, result) => {

if (err) {

res.json(err);

} else {

res.json(result)

}

});

conn.end();

});

module.exports = router;

вдЩЯ4ИіЮФМўШЋВПБраДЭъГЩжЎКѓЃЌдкserverЮФМўМаЯТЕФУќСюДАПкжДааЁАnode indexЁБЃЌШчПДЕНsuccess listen at port:8888ЃЌБэУїЗўЮёЖЫЦєЖЏГЩЙІЁЃ

ВНжш4ЃКДюНЈЧАЖЫЯюФП

дкеОЕуЮФМўМаЃЈШчg:\vue\musicWebsiteClient\test1ЃЉЃЌНјШыcmdУќСюДАПкЃЌШЛКѓдкУќСюаажавРДЮжДаавдЯТУќСюДДНЈвЛИіЛљгк webpack ФЃАхЕФаТЯюФПЁАmusic-clientЁБЁЃ

vue init webpack music-client

дкУќСюаажавРДЮжДаавдЯТСНИіУќСюЃЌАВзАвРРЕАќЁЃ

cd music-manage

npm install

дкУќСюаажажДаавдЯТУќСюЃЌБрвыВЂдЫаааТНЈЕФЯюФПЁАmusic-manageЁБЁЃ

npm run dev

дкЙШИшфЏРРЦїЕФЕижЗРИжаЪфШыЁАЁАЁАhttp://localhost:8080ЁБЃЌдЫаааЇЙћШчЭМ5.2ЫљЪОЃЌдђБэУїЛљгкwebpackЕФvueЯюФПвбО­ГЩЙІДДНЈЁЃ

ЭМ5.2 аТНЈЯюФПГѕЪМдЫаааЇЙћ

дкcmdУќСюДАПкжаЃЌАДCtrl+CЭЃжЙЗўЮёЃЌПЊЪМАВзАelement-uiКЭaxiosвРРЕАќЁЃ

ЪзЯШдЫаавдЯТУќСюЃЌАВзАelement-uiвРРЕАќКЭaxiosвРРЕАќЁЃЁЃ

npm install element-ui axios ЈCS

дкУќСюДАПкжаЃЌжДаавдЯТДњТыдйАВзАvuexвРРЕАќЁЃ

npm install vuex@3.1.1 ЈCsave

дкУќСюДАПкжаЃЌСЌајжДаавдЯТДњТыдйАВзАsassЯрЙивРРЕАќЁЃ

npm install sass-loader@7.3.1 --save-dev

npm install node-sass@4.14.1 --save-dev

дкУќСюДАПкжаЃЌжДаавдЯТДњТыдйАВзААВзАmomentвРРЕАќ

npm install --save moment

ВщПДздЖЏЩњГЩЕФpackage.jsonЮФМўЃЌШєАќКЌШчЭМ5.3ЫљЪОЕФФкШнЃЌБэУївдЩЯвРРЕАќвбО­АВзАГЩЙІЁЃ

ЭМ5.3 package.jsonЮФМўжаdependenciesНкФкШнНиЭМ

ШЛКѓЃЌдкcmdУќСюДАПкжаЃЌдкУќСюаажадйЪфШывдЯТУќСюЃЌдйДЮБрвыдЫааЁАmusic-clientЁАЯюФПЁЃ

npm run dev

жЎКѓЃЌдкЙШИшфЏРРЦїжаЃЌЗУЮЪЁАhttp://localhost:8080/#/ЁАетИівГУцЃЌдЫаааЇЙћШчЭМ5.2ЫљЪОЁЃ

ВНжш5ЃК

дкsrcЯТУцДДНЈШчЭМ5.4ЫљЪОЕФФПТМНсЙЙЁЃзЂвтЃКЦфжаassetsЁЂcomponentsКЭrouterЮФМўМаБОРДОЭгаЁЃ

ЭМ5.4 music-clientЮФМўМажаЕФsrcЮФМўМаЕФФПТМНсЙЙ

ЃЈ1ЃЉ НЋЪЕбщЮхИНМўжаclientЮФМўМаЕФassetsЮФМўМажаЕФЫљгаЮФМўМаКЭЮФМўЖМећЬхПНБДЕНИеИеаТНЈЕФassetsЮФМўМажаЃЛ

ЃЈ2ЃЉ НЋЪЕбщЮхИНМўжаclientЮФМўМаЕФcomponentsЮФМўМажаЕФЫљгаЮФМўЖМПНБДЕНcomponentsЮФМўМажаЃЛ

ЃЈ3ЃЉ НЋЪЕбщЮхИНМўжаclientЮФМўМаЕФpagesЮФМўМажаЕФЫљгаЮФМўЖМПНБДЕНИеИеаТНЈЕФpagesЮФМўМажаЃЛ

ЃЈ4ЃЉ НЋЪЕбщЮхИНМўжаclientЮФМўМаЕФminixsЮФМўМажаЕФЫљгаЮФМўЖМПНБДЕНИеИеаТНЈЕФminixsЮФМўМажаЃЛ

ЃЈ5ЃЉ НЋЪЕбщЮхИНМўжаclientЮФМўМаЕФstoreЮФМўМажаЕФЫљгаЮФМўПНБДЕНИеИеаТНЈЕФstoreЮФМўМажаЁЃ

ВНжш6ЃКдкcomponentsжааТНЈвЛИіУћЮЊЁАTheHeader.vueЁБЕФзщМўЃЌЦфЭъећДњТыШчЯТЁЃ