后端交互项目

pink@zhu

已于 2022-12-01 13:11:52 修改

阅读量209

点赞数

分类专栏： 111 文章标签： bootstrap 前端 javascript

于 2022-11-25 12:52:01 首次发布

本文链接：https://blog.csdn.net/qq_55280248/article/details/128036083

版权

111 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目创建

1：>npm init -y
2: >npm install mysql
3: >npm install underscore
4: >npm install bootstrap@4.6.2

创建一个公有样式public文件夹放图片

views写入前端代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>
		<%=basicInformations[0].name%>-个人简历页
	</title>
	<link href="../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
	<style>
		.rbox {
			margin: 30px;
		}

		.rbox h4 {
			padding-bottom: 5px;
			color: #17a2b8;
			border-bottom: 1px solid #17a2b8;
		}
	</style>

</head>

<body>
	<div id="app" class="container">
		<div class="row">
			<div class="col-sm-8 border order-2">
				<h3>个人简历</h3>
				<div class="rbox">
					<h4>基本信息</h4>

					<div class="row">
						<div class="col-2">
							<strong style="width:95px;">姓名:</strong>
							<%=basicInformations[0].name%>
						</div>

						<div class="col-4">
							<strong style="width:95px;">出生年月:</strong>
							<%=basicInformations[0].birth%>
						</div>

						<div class="col-6">
							<strong style="width:95px;">毕业院校:</strong>
							<%=basicInformations[0].graduatedfrom%>
						</div>

					</div>
					<div class="row">
						<div class="col-2">
							<strong style="width:95px;">专业:</strong>
							<%=basicInformations[0].major%>
						</div>

						<div class="col-4">
							<strong style="width:95px;">毕业日期:</strong>
							<%=basicInformations[0].GraduationDate%>
						</div>

						<div class="col-6">
							<strong style="width:95px;">工作岗位:</strong>
							<%=basicInformations[0].situation%>
						</div>
					</div>

				</div>
				<div class="rbox">
					<h4>个人能力</h4>
					<ol>
						<%personalCapability.forEach(function(rec){%>
							<li>
								<%=rec.item%>
							</li>
							<%})%>
					</ol>
				</div>
				<div class="rbox">
					<h4>实践经历</h4>
					<ol>
						<%practicalExperience.forEach(function(rec){%>
							<li>
								<%=rec.item%>
							</li>
							<%})%>
					</ol>
				</div>
				<div class="rbox">
					<h4>实践经历</h4>
					<ol>
						<%honorCertificate.forEach(function(rec){%>
							<li>
								<%=rec.item%>
							</li>
							<%})%>
					</ol>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

第二页代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>简历列表页</title>
	<link href="../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />

</head>

<body>
	<div id="app" class="container">
		<ul class="list-unstyled">
			<%basicInformations.forEach(function(item){%>
				<li class="media position-relative mt-3" style="height:150px;font-size: larger;">

					<img class="h-100 rounded mr-3 " src="/public/img/<%=item.photo%>" style="width:200px;" alt="照片" />
					<div class="media-body d-flex flex-column justify-content-around h-100">
						<div class="d-flex my-1">
							<strong style="width:95px;">姓名:</strong>
							<a class="text-dark" href="/views/PersonalResume.html?id=<%=item.id%>">	<%=item.name%> </a>
						</div>

						<div class="d-flex my-1"><strong style="width:95px;">目标岗位:</strong><span class="text-muted"><%=item.situation%></span></div>
						<div class="d-flex my-1"><strong style="width:95px;">专业:</strong><span><%=item.major%></span> </div>
						<div class="d-flex my-1"><strong style="width:95px;">工作经验:</strong><span></span><%=item.workexperience%></span> </div>


					</div>

				</li>
				<%})%>


		</ul>
	</div>
</body>

</html>

服务器app,js代码

/*
 * 服务器
 */
var http = require('http')
var config = require('./config')
var router = require('./router')

var server = http.createServer()

server.on('request', function(req, res) {
    //调用路由
    router(req, res)
})

server.listen(config.port, config.host, function() {
    console.log('server is running at  ' + config.host + ':' + config.port)
})

config.js文件

/*
* 配置文件
* 开放config
*/
module.exports= {
    port:3000,
    host:'127.0.0.1',
    user:'root',
    password:'',
    database:'resume'
}

model.js

/*
*连接数据库
 */
var mysql = require('mysql')
var config = require('./config')

//创建连接池
var pool = mysql.createPool({
    connectionLimit: 100,//最大连接数
    multipleStatements: true,//允许多语句查询
    host: config.host,
    user: config.user,
    password: config.password,
    database: config.database
})

//查找前5位学生的简历信息
module.exports.findResumeBasicInformations = function (callback) {
    pool.getConnection(function (err, conn) {
        if (err) {
            return callback("连接池连接失败！" + err, null)
        }

        var sql = `SELECT * FROM ResumeBasicInformationTable ORDER BY id LIMIT 5;
               `
        conn.query(sql, function (err, results) {
            conn.release()
            if (err) {
                return callback("查询失败！" + err, null)
            }
            callback(null, results)
        })


    })
}


//根据id查找用户个人简历
module.exports.findResumeInformations = function (id, callback) {
    pool.getConnection(function (err, conn) {
        if (err) {
            return callback("连接池连接失败！" + err, null)
        }
        var sql=`SELECT * FROM ResumeBasicInformationTable WHERE id=? ;
        SELECT * FROM PersonalCapabilityTable WHERE id=? ;
        SELECT * FROM PracticalExperienceTable WHERE id=? ;
        SELECT * FROM HonorCertificateTable WHERE id=? ;
        `
        conn.query(sql, [id,id,id,id], function (err, results) {
            conn.release()
            if (err) {
                return callback("查询失败！" + err, null)
            }
            callback(null, results)
        })

        
    })
}

routur.js

/*
*路由
 */
var url=require('url')
var path=require('path')
var fs=require('fs')
// var formidable=require('formidable')
var _=require('underscore')
var model=require('./model')

module.exports=function (req,res) {
    var urlObj=url.parse(req.url,true)
    var pathname=urlObj.pathname
    var method=req.method.toLowerCase()
    //为req追加一个query属性，属性值urlObj.query
    req.query=urlObj.query
    //展示 简历列表页（ResumeList.html）
    if (pathname=='/' && method=='get'){
        fs.readFile(path.join(__dirname,'views' , 'ResumeList.html'),function (err,data) {
            if (err){
                return res.end(err.message)
            }
            model.findResumeBasicInformations(function (err,results) {
                // console.log(results)
                var compiled=_.template(data.toString())
                var htmlStr=compiled({
                    basicInformations:results
                })
                res.setHeader('Content-Type','text/html;charset=utf-8')
                res.end(htmlStr)
                // res.end(data)
            })
        })

    //公开public和node_modules中的静态资源
    //}else if (pathname.startsWith('/public/') && method=='get') {
    }else if (['/public/','/node_modules/'].findIndex(item => pathname.startsWith(item))>=0  && method=='get') {
        fs.readFile(path.join(__dirname,pathname),function (err,data) {
            if (err){
                return res.end(err.message)
            }
            res.end(data)
        })
    
}else if (['/views/PersonalResume.html'].findIndex(item => pathname.startsWith(item))>=0  && method=='get') {
    fs.readFile(path.join(__dirname,pathname),function (err,data) {
        if (err){
            return res.end(err.message)
        }
        
        model.findResumeInformations(urlObj.query.id,function (err,results) {
            // console.log(results)
            var compiled=_.template(data.toString())
            var htmlStr=compiled({
                basicInformations:results[0],
                personalCapability:results[1],
                practicalExperience:results[2],
                honorCertificate:results[3]
            })
            res.setHeader('Content-Type','text/html;charset=utf-8')
            res.end(htmlStr)
            // res.end(data)
        })
        

    })
}
    
 
}

package.josn

{
  "name": "exam",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^4.6.2",
    "mysql": "^2.18.1",
    "underscore": "^1.13.6"
  }
}

package-lock.josn

{
  "name": "exam",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "bignumber.js": {
      "version": "9.0.0",
      "resolved": "https://registry.npmmirror.com/bignumber.js/-/bignumber.js-9.0.0.tgz",
      "integrity": "sha512-t/OYhhJ2SD+YGBQcjY8GzzDHEk9f3nerxjtfa6tlMXfe7frs/WozhvCNoGvpM0P3bNf3Gq5ZRMlGr5f3r4/N8A=="
    },
    "bootstrap": {
      "version": "4.6.2",
      "resolved": "https://registry.npmmirror.com/bootstrap/-/bootstrap-4.6.2.tgz",
      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ=="
    },
    "core-util-is": {
      "version": "1.0.3",
      "resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz",
      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
    },
    "inherits": {
      "version": "2.0.4",
      "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz",
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
    "isarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/isarray/-/isarray-1.0.0.tgz",
      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
    },
    "mysql": {
      "version": "2.18.1",
      "resolved": "https://registry.npmmirror.com/mysql/-/mysql-2.18.1.tgz",
      "integrity": "sha512-Bca+gk2YWmqp2Uf6k5NFEurwY/0td0cpebAucFpY/3jhrwrVGuxU2uQFCHjU19SJfje0yQvi+rVWdq78hR5lig==",
      "requires": {
        "bignumber.js": "9.0.0",
        "readable-stream": "2.3.7",
        "safe-buffer": "5.1.2",
        "sqlstring": "2.3.1"
      }
    },
    "process-nextick-args": {
      "version": "2.0.1",
      "resolved": "https://registry.npmmirror.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
    },
    "readable-stream": {
      "version": "2.3.7",
      "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.7.tgz",
      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
      "requires": {
        "core-util-is": "~1.0.0",
        "inherits": "~2.0.3",
        "isarray": "~1.0.0",
        "process-nextick-args": "~2.0.0",
        "safe-buffer": "~5.1.1",
        "string_decoder": "~1.1.1",
        "util-deprecate": "~1.0.1"
      }
    },
    "safe-buffer": {
      "version": "5.1.2",
      "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.1.2.tgz",
      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
    },
    "sqlstring": {
      "version": "2.3.1",
      "resolved": "https://registry.npmmirror.com/sqlstring/-/sqlstring-2.3.1.tgz",
      "integrity": "sha512-ooAzh/7dxIG5+uDik1z/Rd1vli0+38izZhGzSa34FwR7IbelPWCCKSNIl8jlL/F7ERvy8CB2jNeM1E9i9mXMAQ=="
    },
    "string_decoder": {
      "version": "1.1.1",
      "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.1.1.tgz",
      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
      "requires": {
        "safe-buffer": "~5.1.0"
      }
    },
    "underscore": {
      "version": "1.13.6",
      "resolved": "https://registry.npmmirror.com/underscore/-/underscore-1.13.6.tgz",
      "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A=="
    },
    "util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
    }
  }
}