前言
- 这是笔者随手做的小项目，做的很垃圾，但是感兴趣的话，可以私信我发你源码
- 将源码pull到hbuilder 或者 vscode
- 文件中的将sql文件夹下的SQL文件运行到mysql
- 将mysql.js文件的数据库配置改成自己的
- 接着在cmd窗口或者你代码编辑器的终端下运行cd到当前项目包下，依次运行 npm install 和npm start 语句
项目介绍
项目简介
《你的名字。》主题应用是作者基于对这部电影的热爱而制作的一款没什么实际应用价值的桌面应用软件。完全的基于作者自己兴趣，再加上吃草挤奶的磨洋工，最后完成了本项目。（本质上来说，这就是一个花瓶，花这几百兆下这个没用的东西，还不如直接跑网站上去看更好地）
功能介绍
有如下功能：
用户的登录、注册
插画的展示以及上传图片，视频的展示播放以及上传视频
音乐的展示播放以及上传音乐。
还有在线留言功能，可以查看别人发的评论以及自己留言
数据库表
本项目一共包含五张表，分别是用户表，图片表，视频表，音乐表，以及留言评论表
注意：因为是一个简单的项目，数据库的表是建着玩的，表与表之间没有联系,只是为了完成功能而创建
项目结构
项目整体开发结构，使用electron框架，node.js,mysql,前端三件，jQuery等技术栈实现
项目实现
登录注册页面
首页
插图界面
视频界面
音乐界面
在线留言界面
部分源码
$(function() {
//点击首页
$('#shouye').click(() => {
$('.shouye-center').css('display', 'block').siblings().hide()
})
//点击插图
$('#pictrue').click(() => {
$('#pictrue-center').css('display', 'block').siblings().hide()
})
//点击视频
$('#video').click(() => {
$('#video-center').css('display', 'block').siblings().hide()
})
//点击音乐
$('#music').click(() => {
$('#music-center').css('display', 'block').siblings().hide()
})
//点击在线留言
$('#comment').click(() => {
$('#comment-center').css('display', 'block').siblings().hide()
})
//点击返回顶部
$("#toTop").hide(); //一开始隐藏掉div
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) { //判断条件2：如果滚动条滚动的实际高度>=50，则#toTop出现
$("#toTop").fadeIn(500); //淡入，设置渐变时间持续0.5秒
} else {
$("#toTop").fadeOut(500); //淡出
}
})
// 点击div，返回顶部
$("#toTop").click(function() {
$("body,html").animate({
//html是最外层标签，可以代表整个页面；body 是它二级标签，可以用它代表页面的文档部分
// "body,html"都写上，兼容多浏览器
scrollTop: 0
}, 500); //500是滚动到顶部所需要的时间0.5秒
})
/**
* 首页展示界面
*/
//登录
$('.top-login').click(() => {
ipcRenderer.send('login-index')
ipcRenderer.on('getUserTracks', (ev, user) => {
console.log('用户信息对象：' + user);
if (user) {
userInfo = user
$('.top-login').html(userInfo[0].username)
}
})
})
/**
* 在线留言界面
*/
$('#comment-button').click(() => {
console.log($('.top-login').html());
console.log($('#comment-text').val());
if ($('.top-login').html() == '登录') {
alert('请先登录')
return
}
//模板字符串，将评论li渲染到界面上
if ($('#comment-text').val()) {
str += `<li>
<span id="username">${$('.top-login').text()}:</span>
<p id="username-comment">${$('#comment-text').val()}</p>
<hr>
</li>`
$('#comment-ul').append(str)
//将评论保存到数据库
sql =
`insert into t_comment(username,text) values('${$('.top-login').text()}','${$('#comment-text').val()}')`
query(sql, (err, vals, fields) => {
console.log(vals);
console.log(err);
if (err) {
alert('发布评论失败，数据库写入失败')
}
})
} else {
alert('请输入内容')
}
$('#comment-text').val("")
})
//加载评论
function loadComment() {
sql = 'select * from t_comment'
query(sql, (err, vals, fields) => {
console.log(err);
let allComment = JSON.parse(JSON.stringify(vals))
console.log(allComment);
// 参数：value数组中的当前项,index当前项的索引,array原始数组；
allComment.forEach((value, index, allComment) => {
str += `<li>
<span id="username">${allComment[index].username}:</span>
<p id="username-comment">${allComment[index].text}</p>
<hr>
</li>`
$('#comment-ul').append(str)
//不清空会造成字符串累加，会多次输出重复评论
str = ''
})
})
}
loadComment()
/**
* 插画界面
*/
function allPictrueQuery(){
//查询 t_music表的所有内容
sql = "select * from t_pictrue"
query(sql, (err, vals, fields)=>{
//将音乐表中所有数据查出来，封装，准备去重
allPictrue = JSON.parse(JSON.stringify(vals))
console.log(allPictrue);
})
}
allPictrueQuery()
//渲染页面，将数据库总已上传的视频渲染到页面
function showPictrue(){
sql = "select * from t_pictrue"
query(sql, (err, vals, fields)=>{
//将音乐表中所有数据查出来，封装，准备去重
allPictrue = JSON.parse(JSON.stringify(vals))
console.log(allPictrue);
console.log(allPictrue[0].vedioPathFile);
allPictrue.forEach((value, index, allPictrue)=>{
str += `<li>
<div class="pictrue-list-oneof">
<p>上传用户：<span>${allPictrue[index].username}</span></p>
<h3>${allPictrue[index].filename}</h3>
<img src="${allPictrue[index].pictruePathFile}" alt="">
</div>
<hr>
</li>`
$('#pictrue-listFile').append(str)
str = ''
})
})
}
showPictrue()
// 上传图片
$('#upload-pictrue').click(() => {
if ($('.top-login').html() == '登录') {
alert('请先登录')
return
}
ipcRenderer.send('open-picture-dailog')
})
//接受文件,将文件路径赋值给musicFilePath
ipcRenderer.on('selected-pictrueFile',(ev,filePaths)=>{
//渲染页面，将添加的视频渲染到页面上
pictrueFilePath = filePaths
console.log(pictrueFilePath)
let fileName
pictrueFilePath.forEach((value, index, pictrueFilePath)=>{
fileName = path.basename(pictrueFilePath[index])
pictrueFilePath[index] = pictrueFilePath[index].replaceAll("\\", "\\/")
// console.log(musicFilePath[index]);
//去重
let flag = true //标记变量
allPictrue.forEach((value, index, allPictrue)=>{
if(fileName === allPictrue[index].filename){
flag = false
return
}
})
if(!flag){
alert('图片已经上传过啦！去欣赏一下吧')
return
}
str += `<li>
<div class="pictrue-list-oneof">
<p>上传用户：<span>${$('.top-login').html()}</span></p>
<h3>${fileName}</h3>
<img src="${pictrueFilePath[index]}" alt="">
</div>
<hr>
</li>`
$('#pictrue-listFile').append(str)
str = ''
sql = `insert into t_pictrue(username,filename,pictruePathFile) values('${$('.top-login').html()}','${fileName}','${pictrueFilePath[index]}')`
query(sql, (err, vals, fields)=>{
console.log(err);
console.log(vals);
})
})
})
/**
* 视频界面
*/
function allVideoQuery(){
//查询 t_music表的所有内容
sql = "select * from t_vedio"
query(sql, (err, vals, fields)=>{
//将音乐表中所有数据查出来，封装，准备去重
allVideo = JSON.parse(JSON.stringify(vals))
console.log(allVideo);
})
}
allVideoQuery()
//渲染页面，将数据库总已上传的视频渲染到页面
function showVideo(){
sql = "select * from t_vedio"
query(sql, (err, vals, fields)=>{
//将音乐表中所有数据查出来，封装，准备去重
allVideo = JSON.parse(JSON.stringify(vals))
console.log(allVideo);
console.log(allVideo[0].vedioPathFile);
allVideo.forEach((value, index, allVideo)=>{
str += `<li>
<p>上传用户：<span>${allVideo[index].username}</span></p>
<div class="video-list-oneof">
<h3>${allVideo[index].filename}</h3>
<video controls src="${allVideo[index].vedioPathFile}"></video>
</div>
<hr>
</li>`
$('#video-listFile').append(str)
str = ''
})
})
}
showVideo()
// 上传视频
$('#upload-video').click(() => {
if ($('.top-login').html() == '登录') {
alert('请先登录')
return
}
ipcRenderer.send('open-video-dailog')
})
//接受文件,将文件路径赋值给musicFilePath
ipcRenderer.on('selected-videoFile',(ev,filePaths)=>{
//渲染页面，将添加的视频渲染到页面上
videoFilePath = filePaths
console.log(videoFilePath)
let fileName
videoFilePath.forEach((value, index, videoFilePath)=>{
fileName = path.basename(videoFilePath[index])
videoFilePath[index] = videoFilePath[index].replaceAll("\\", "\\/")
// console.log(musicFilePath[index]);
//去重
let flag = true //标记变量
allVideo.forEach((value, index, allVideo)=>{
if(fileName === allVideo[index].filename){
flag = false
return
}
})
if(!flag){
alert('视频已经上传过啦！去欣赏一下吧')
return
}
str += `<li>
<p>上传用户：<span>${$('.top-login').html()}</span></p>
<div class="video-list-oneof">
<h3>${fileName}</h3>
<video controls src="${videoFilePath[index]}"></video>
</div>
<hr>
</li>`
$('#video-listFile').append(str)
str = ''
sql = `insert into t_vedio(username,filename,vedioPathFile) values('${$('.top-login').html()}','${fileName}','${videoFilePath[index]}')`
query(sql, (err, vals, fields)=>{
console.log(err);
console.log(vals);
})
})
})
/**
* 音乐界面
*/
function allMusicQuery(){
//查询 t_music表的所有内容
sql = "select * from t_music"
query(sql, (err, vals, fields)=>{
//将音乐表中所有数据查出来，封装，准备去重
allMusic = JSON.parse(JSON.stringify(vals))
console.log(allMusic);
})
}
//渲染页面，将数据库总已上传的音乐渲染到页面
function showMusic(){
sql = "select * from t_music"
query(sql, (err, vals, fields)=>{
//将音乐表中所有数据查出来，封装，准备去重
allMusic = JSON.parse(JSON.stringify(vals))
console.log(allMusic);
console.log(allMusic[0].musicPathFile);
allMusic.forEach((value, index, allMusic)=>{
str += `<li>
<p>上传用户：<span>${allMusic[index].username}</span></p>
<div class="music-list-oneof">
<h3>${allMusic[index].filename}</h3>
<audio controls src="${allMusic[index].musicPathFile}"></audio>
</div>
<hr>
</li>`
$('#muisc-listFile').append(str)
str = ''
})
})
}
showMusic()
// 上传音乐
$('#upload-music').click(() => {
if ($('.top-login').html() == '登录') {
alert('请先登录')
return
}
ipcRenderer.send('open-music-dailog')
})
//接受文件,将文件路径赋值给musicFilePath
ipcRenderer.on('selected-musicFile',(ev,filePaths)=>{
allMusicQuery()
//渲染页面，将添加的歌曲渲染到页面上
musicFilePath = filePaths
console.log(musicFilePath)
let fileName
musicFilePath.forEach((value, index, musicFilePath)=>{
fileName = path.basename(musicFilePath[index])
musicFilePath[index] = musicFilePath[index].replaceAll("\\", "\\/")
console.log(musicFilePath[index]);
//去重
let flag = true //标记变量
allMusic.forEach((value, index, allMusic)=>{
if(fileName === allMusic[index].filename){
flag = false
return
}
})
if(!flag){
alert('歌曲已经上传过啦！去听一听吧')
return
}
console.log(fileName)
str += `<li>
<p>上传用户：<span>${$('.top-login').html() }</span></p>
<div class="music-list-oneof">
<h3>${fileName}</h3>
<audio controls src="${musicFilePath[index]}"></audio>
</div>
<hr>
</li>`
$('#muisc-listFile').append(str)
str = ''
sql = `insert into t_music(username,filename,musicPathFile) values('${$('.top-login').html()}','${fileName}','${musicFilePath[index]}')`
query(sql, (err, vals, fields)=>{
console.log(err);
console.log(vals);
})
})
})
})
7105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
