本文主要介绍了使用Django框架进行后端开发，包括错误页面、登录、注册、注销、主页、个人信息修改及密码重置等功能的实现。涉及到的文件包括views.py、静态文件引用、自定义函数等，并详细讲解了各页面的代码编写和数据分析过程。
四、页面信息以及后端
引用外部static文件 下载:文件 密码:1oeu
views.py的相关库
from django.core.paginator import Paginator
from django.shortcuts import render, redirect
from myapp.models import User
from .utils.error import *
import hashlib
from .utils import getHomeData
from .utils import getSelfInfo
from .utils import getChangePW
from .utils.error import *
from .utils import getTableData
from .utils import getSalary
from .utils import getCompany
from .utils import geteduData
from .utils import getCompanyStatus
from .utils import getAddress
from spider import boss
from . import world_cloud, models在/myapp/utils下编写getPublicData.py
自定义月份、工作经验、薪资期间、公司规模、热门城市列表和学历字典，获取数据库中的所有用户和所有工作信息
from myapp.models import *
monthList = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October','November', 'December']
edus = {'博士': 1, '硕士': 2, '本科': 3, '大专': 4, '高中': 5, '中专/中技': 6, '初中及以下': 7, "学历不限": 8}
workexp = ['在校/应届', '经验不限', '1-3年', '3-5年', '5-10年', '10年以上']
salarylist = ['0-10k', '10-20k', '20-30k', '30-40k', '40k以上']
companyPeo = ['20人以下', '100人以下', '500人以下', '1000人以下', '1万人以下', '1万人以上']
City=['北京','上海','广州','深圳','杭州','天津','西安','苏州','武汉','厦门','长沙','成都','郑州','重庆']
def getAllUsers():
return User.objects.all()
def getAllJobs():
return JobInfo.objects.all()4.1错误页面
在/myapp/utils/下新建error.py,编写error信息代码
from django.shortcuts import render
def error(request,errMsg):
return render(request,'extra-404.html',{'errMsg':errMsg})在/templates/下新建extra-404.html页面，编写网页代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Neon Admin Panel">
<meta name="author" content="">
<title>error</title>
<link rel="stylesheet" href="/static/css/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="/static/css/entypo.css">
<link rel="stylesheet" href="/static/css/css.css">
<link rel="stylesheet" href="/static/css/bootstrap.css">
<link rel="stylesheet" href="/static/css/neon-core.css">
<link rel="stylesheet" href="/static/css/neon-theme.css">
<link rel="stylesheet" href="/static/css/neon-forms.css">
<link rel="stylesheet" href="/static/css/custom.css">
<script src="/static/js/jquery-1.11.0.min.js"></script>
<script src="/assets/js/ie8-responsive-file-warning.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body class="page-body" data-url="http://neon.dev">
<div class="page-container">
<div class="sidebar-menu">
<header class="logo-env">
<div class="logo">
<a href="/myapp/home">
<h3 style="color: #fff1f0;font-weight: bold;margin-top: 5px">岗位数据可视化</h3>
</a>
</div>
</header>
<ul id="main-menu" class="">
<li class="opened active">
<a href="/myapp/home">
<i class="entypo-gauge"></i>
<span>首页</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-user"></i>
<span>个人中心</span>
</a>
<ul>
<li>
<a href="/myapp/selfInfo">
<span>个人信息</span>
</a>
</li>
<li>
<a href="/myapp/changePW">
<span>修改密码</span>
</a>
</li>
</ul>
</li>
<li>
<a href="/myapp/tableData">
<i class="entypo-newspaper"></i>
<span>数据总览</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-chart-bar"></i>
<span>可视化</span>
</a>
<ul>
<li>
<a href="/myapp/salary/">
<i class="entypo-inbox"></i>
<span>薪资</span>
</a>
</li>
<li>
<a href="/myapp/company">
<i class="entypo-pencil"></i>
<span>企业</span>
</a>
</li>
<li>
<a href="/myapp/companyTags">
<i class="entypo-attach"></i>
<span>福利</span>
</a>
</li>
<li>
<a href="/myapp/edu/">
<i class="entypo-attach"></i>
<span>学历分布</span>
</a>
</li>
<li>
<a href="/myapp/companyStatus/">
<i class="entypo-attach"></i>
<span>企业融资</span>
</a>
</li>
<li>
<a href="/myapp/address/">
<i class="entypo-attach"></i>
<span>城市类型</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<div class="page-error-404">
<div class="error-symbol">
<i class="entypo-attention"></i>
</div>
<div class="error-text">
<h2>ERROR</h2>
<p style="font-size: 30px;color:#f0c706"> {{ errMsg }}</p>
<button id="back" style="font-size: 30px;color: #00a65a">返回上一个页面</button>
</div>
<hr>
</div>
</div>
</div>
<script src="/static/js/main-gsap.js"></script>
<script src="/static/js/jquery-ui-1.10.3.minimal.min.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script src="/static/js/joinable.js"></script>
<script src="/static/js/resizeable.js"></script>
<script src="/static/js/neon-api.js"></script>
<script src="/static/js/neon-chat.js"></script>
<script src="/static/js/neon-custom.js"></script>
<script src="/static/js/neon-demo.js"></script>
<script>
var back = document.getElementById('back');
back.onclick = () => {
history.back();
}
</script>
</body>
</html>4.2登录页面
在views，编写登录的代码
def login(request):
if request.method == 'GET':
return render(request, 'login.html')
else:
uname = request.POST.get("username")
pwd = request.POST.get("password")
mds = hashlib.md5()
mds.update(pwd.encode())
pwd = mds.hexdigest()
try:
user = User.objects.get(username=uname, password=pwd)
request.session['username'] = user.username
return redirect('/myapp/home')
except:
if not uname or not pwd:
return error(request, '不许为空!')
return error(request, '用户名或密码错误！')在/templates/下新建login.html页面，编写网页代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Neon Admin Panel">
<meta name="author" content="">
<title>登录</title>
<link rel="stylesheet" href="/static/css/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="/static/css/entypo.css">
<link rel="stylesheet" href="/static/css/css.css">
<link rel="stylesheet" href="/static/css/bootstrap.css">
<link rel="stylesheet" href="/static/css/neon-core.css">
<link rel="stylesheet" href="/static/css/neon-theme.css">
<link rel="stylesheet" href="/static/css/neon-forms.css">
<link rel="stylesheet" href="/static/css/custom.css">
<script src="/static/js/jquery-1.11.0.min.js"></script>
<script src="/assets/js/ie8-responsive-file-warning.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body class="page-body login-page login-form-fall" data-url="http://neon.dev">
<script type="text/javascript">
var baseurl = '';
</script>
<div class="login-container">
<div class="login-header login-caret">
<div class="login-content">
<a href="index.html" class="logo">
<h1 style="color:#d4a515;font-weight: bolder">岗位数据可视化系统</h1>
</a>
</div>
</div>
<div class="login-progressbar">
<div></div>
</div>
<div class="login-form">
<div class="login-content">
<form method="post" action="/myapp/login/" role="form" id="form_login">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="entypo-user"></i>
</div>
<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名" autocomplete="off">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="entypo-key"></i>
</div>
<input type="password" class="form-control" name="password" id="password" placeholder="请输入用户名密码" autocomplete="off">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block btn-login">
<i class="entypo-login"></i>
登录
</button>
</div>
<div class="form-group">
</div>
<div class="form-group">
<a href="/myapp/register"
class="btn btn-default btn-lg btn-block btn-icon icon-left facebook-button">
注册
<i class="entypo-facebook"></i>
</a>
</div>
</form>
</div>
</div>
</div>
<script src="/static/js/main-gsap.js"></script>
<script src="/static/js/jquery-ui-1.10.3.minimal.min.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script src="/static/js/joinable.js"></script>
<script src="/static/js/resizeable.js"></script>
<script src="/static/js/neon-api.js"></script>
<script src="/static/js/jquery.validate.min.js"></script>
<script src="/static/js/neon-login.js"></script>
<script src="/static/js/neon-custom.js"></script>
<script src="/static/js/neon-demo.js"></script>
</body>
</html>4.3 注册页面
在views，编写注册的代码
def register(request):
if request.method == 'GET':
return render(request, 'register.html')
else:
uname = request.POST.get("username")
pwd = request.POST.get("password")
checkpw = request.POST.get("checkPassword")
try:
User.objects.get(username=uname)
except:
if not uname or not pwd or not checkpw:
return error(request, '不许为空!')
if len(pwd) < 8 or len(pwd) > 16:
return error(request, '密码不符合规则！')
if pwd != checkpw:
return error(request, '两次密码不符合!')
mds = hashlib.md5()
mds.update(pwd.encode())
pwd = mds.hexdigest()
User.objects.create(username=uname, password=pwd)
return redirect('/myapp/login')
return error(request, "该用户名已被注册！")在/templates/下新建register.html页面，编写网页代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Neon Admin Panel">
<meta name="author" content="">
<title>注册</title>
<link rel="stylesheet" href="/static/css/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="/static/css/entypo.css">
<link rel="stylesheet" href="/static/css/css.css">
<link rel="stylesheet" href="/static/css/bootstrap.css">
<link rel="stylesheet" href="/static/css/neon-core.css">
<link rel="stylesheet" href="/static/css/neon-theme.css">
<link rel="stylesheet" href="/static/css/neon-forms.css">
<link rel="stylesheet" href="/static/css/custom.css">
<script src="/static/js/jquery-1.11.0.min.js"></script>
<script src="/assets/js/ie8-responsive-file-warning.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body class="page-body login-page login-form-fall" data-url="http://neon.dev">
<script type="text/javascript">
var baseurl = '';
</script>
<div class="login-container">
<div class="login-header login-caret">
<div class="login-content">
<a href="index.html" class="logo">
<h1 style="color:#d4a515;font-weight: bolder">岗位数据可视化系统</h1>
</a>
<p class="description">请在此页面注册</p>
</div>
</div>
<div class="login-form">
<div class="login-content">
<form method="post" role="form" action="/myapp/register/" id="form_register">
<div>
<div class="step" id="step-2">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="entypo-user-add"></i>
</div>
<input type="text" class="form-control" name="username" id="username"
placeholder="请填写用户名"
autocomplete="off">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="entypo-lock"></i>
</div>
<input type="password" class="form-control" name="password" id="password"
placeholder="请填写密码" autocomplete="off">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="entypo-lock"></i>
</div>
<input type="password" class="form-control" name="checkPassword" id="password" placeholder="请确认密码" autocomplete="off">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-block btn-login">
<i class="entypo-right-open-mini"></i>
注册
</button>
</div>
</div>
</div>
</form>
<div class="login-bottom-links">
<a href="/myapp/login/" class="link">
<i class="entypo-lock"></i>
返回登录页面
</a>
<br>
</div>
</div>
</div>
</div>
<script src="/static/js/main-gsap.js"></script>
<script src="/static/js/jquery-ui-1.10.3.minimal.min.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script src="/static/js/joinable.js"></script>
<script src="/static/js/resizeable.js"></script>
<script src="/static/js/neon-api.js"></script>
<script src="/static/js/jquery.validate.min.js"></script>
<script src="/static/js/neon-register.js"></script>
<script src="/static/js/jquery.inputmask.bundle.min.js"></script>
<script src="/static/js/neon-custom.js"></script>
<script src="/static/js/neon-demo.js"></script>
</body>
</html>4.3.注销
在views，编写注销的代码
def logout(request):
request.session.clear()
return redirect('login')4.4主页页面
在views，编写主页的代码
def home(request):
uname = request.session['username']
userInfo = User.objects.get(username=uname)
#调用数据表的函数
homeData = getHomeData.getTable()
#分页
pageinator = Paginator(homeData, 10)
cur_page = 1
if request.GET.get('page'):
cur_page = int(request.GET.get('page'))
c_page = pageinator.page(cur_page)
page_range = []
visbleNum = 10
min = int(cur_page - visbleNum / 10)
if min < 1:
min = 1
max = min + visbleNum
if max > pageinator.page_range[-1]:
max = pageinator.page_range[-1]
for i in range(min, max):
page_range.append(i)
#调用获取时间的函数
year, month, day = getHomeData.getNowTime()
#调用获取用户创建时间的函数
userCreateData = getHomeData.getUserCreateTime()
#调用用户排名的函数
topUsers = getHomeData.getUserTop()
#调用统计数据总量，用户数量，筛选最高学历，最高薪资，最高年薪，岗位性质，优势地点的函数
jobslen, userslen, eduTop, salaryTop, addressTop, salaryMonthTop, praticeMax = getHomeData.getAllTags()
return render(request, 'home.html', {
'userInfo': userInfo,
'dateInfo': {
'year': year,
'month': month,
'day': day
},
'c_page': c_page,
'page_range': page_range,
'pageinator': pageinator,
'userCreateData': userCreateData,
'topUsers': topUsers,
'tagDic': {
'jobslen': jobslen,
'userslen': userslen,
'eduTop': eduTop,
'salaryTop': salaryTop,
'addressTop': addressTop,
'salaryMonthTop': salaryMonthTop,
'praticeMax': praticeMax,
}
})对主页数据分析，写在/myapp/utils中的getHomeData.py中，在views调用函数方法
from .getPublicData import *
import time
import json
#获取时间
def getNowTime():
timeFormat = time.localtime()
year = timeFormat.tm_year
month = timeFormat.tm_mon
day = timeFormat.tm_mday
return year, monthList[month - 1], day
#获取用户创建时间
def getUserCreateTime():
users = getAllUsers()
data = {}
for i in users:
if data.get(str(i.creareTime), -1) == -1:
data[str(i.creareTime)] = 1
else:
data[str(i.creareTime)] += 1
result = []
for k, v in data.items():
result.append({
'name': k,
'value': v
})
return result
#用户排名
def getUserTop():
users = getAllUsers()
def sort(item):
return time.mktime(time.strptime(str(item.creareTime), '%Y-%m-%d'))
users = list(sorted(users, key=sort, reverse=True))[:6]
return users
#统计数据总量，用户数量，筛选最高学历，最高薪资，最高年薪，岗位性质，优势地点
def getAllTags():
jobs = JobInfo.objects.all()
users = User.objects.all()
eduTop = '学历不限'
salaryTop = 0
salaryMonthTop = 0
address = {}
pratice = {}
for job in jobs:
if edus[job.edu] < edus[eduTop]:
eduTop = job.edu
if int(job.pratice) == 0:
salary = json.loads(job.salary)[1]
if salaryTop < salary:
salaryTop = salary
if int(job.salaryMonth) > salaryMonthTop:
salaryMonthTop = int(job.salaryMonth)
if address.get(job.address, -1) == -1:
address[job.address] = 1
else:
address[job.address] += 1
if pratice.get(job.pratice, -1) == -1:
pratice[job.pratice] = 1
else:
pratice[job.pratice] += 1
addressStr = sorted(address.items(), key=lambda x: x[1], reverse=True)[:3]
addressTop = ''
praticeMax = sorted(pratice.items(), key=lambda x: x[1], reverse=True)
for index, item in enumerate(addressStr):
if index == len(addressStr) - 1:
addressTop += item[0]
else:
addressTop += item[0] + ','
return len(jobs), len(users), eduTop, salaryTop, addressTop, salaryMonthTop, praticeMax[0][0]
#数据表部分数据处理
def getTable():
jobs = getAllJobs()
for i in jobs:
#工作标签处理
i.workTag = ','.join(json.loads(i.workTag)[:2])
#公司规模，公司福利处理
if i.companyTags != '无':
i.companyTags = (json.loads(i.companyTags)[0])
if i.companyPeo == '[0, 10000]':
i.companyPeo = '10000人以上'
else:
i.companyPeo = json.loads(i.companyPeo)
i.companyPeo = list(map(lambda x: str(x), i.companyPeo))
i.companyPeo = ('-'.join(i.companyPeo) + '人')
#薪资处理
i.salary = json.loads(i.salary)
if not int(i.pratice) == 1:
i.salary = list(map(lambda x: str(int(x / 1000)), i.salary))
else:
i.salary = list(map(lambda x: str(int(x)), i.salary))
i.salary = '-'.join(i.salary)
return jobs在/templates/下新建home.html页面，编写网页代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Neon Admin Panel">
<meta name="author" content="">
<title>首页</title>
<link rel="stylesheet" href="/static/css/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="/static/css/entypo.css">
<link rel="stylesheet" href="/static/css/css.css">
<link rel="stylesheet" href="/static/css/bootstrap.css">
<link rel="stylesheet" href="/static/css/neon-core.css">
<link rel="stylesheet" href="/static/css/neon-theme.css">
<link rel="stylesheet" href="/static/css/neon-forms.css">
<link rel="stylesheet" href="/static/css/custom.css">
<script src="/static/js/jquery-1.11.0.min.js"></script>
<script src="/assets/js/ie8-responsive-file-warning.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body class="page-body page-left-in" data-url="http://neon.dev">
<div class="page-container">
<div class="sidebar-menu">
<header class="logo-env">
<div class="logo">
<a href="index.html">
<h3 style="color: #fff1f0;font-weight: bold;margin-top: 5px">岗位数据可视化</h3>
</a>
</div>
</header>
<div class="sidebar-user-info">
<div class="sui-normal">
<a href="#" class="user-link">
<img style="width: 95%;border-radius: 50%" src="/media/{{ userInfo.avatar }}" width="120" alt=""><br>
<span style="text-align: center;padding-top: 209px">欢迎回来,</span>
<strong style="text-align: center;margin-top: 5px">{{ userInfo.username }}</strong>
</a>
</div>
<ul id="main-menu" class="">
<li class="opened active">
<a href="/myapp/home">
<i class="entypo-gauge"></i>
<span>首页</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-user"></i>
<span>个人中心</span>
</a>
<ul>
<li>
<a href="/myapp/selfInfo">
<span>个人信息</span>
</a>
</li>
<li>
<a href="/myapp/changePW">
<span>修改密码</span>
</a>
</li>
</ul>
</li>
<li>
<a href="/myapp/tableData">
<i class="entypo-newspaper"></i>
<span>数据总览</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-chart-bar"></i>
<span>可视化</span>
</a>
<ul>
<li>
<a href="/myapp/salary">
<i class="entypo-light-down"></i>
<span>薪资</span>
</a>
</li>
<li>
<a href="/myapp/company">
<i class="entypo-feather"></i>
<span>企业</span>
</a>
</li>
<li>
<a href="/myapp/companyTags">
<i class="entypo-lamp"></i>
<span>福利</span>
</a>
</li>
<li>
<a href="/myapp/edu">
<i class="entypo-graduation-cap"></i>
<span>学历分布</span>
</a>
</li>
<li>
<a href="/myapp/companyStatus">
<i class="entypo-network"></i>
<span>企业融资</span>
</a>
</li>
<li>
<a href="/myapp/address">
<i class="entypo-rocket"></i>
<span>城市类型</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<div class="row" style="display: flex">
<div style="margin-left: auto" class="col-md-6 col-sm-4 clearfix hidden-xs">
<ul class="list-inline links-list pull-right">
<li class="sep"></li>
<li>
<a href="/myapp/logout">
注销 <i class="entypo-logout right"></i>
</a>
</li>
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-12">
<div class="well">
<h1>{{ dateInfo.month }} {{ dateInfo.day }} , {{ dateInfo.year }}</h1>
<h3>Welcome to the site <strong>{{ userInfo.username }}</strong></h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">用户创建时间饼状图</div>
<div class="panel-options">
<a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>
<a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
<a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
</div>
</div>
<div class="panel-body">
<div id="main" style="width: 100%;height: 300px"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">最新用户信息</div>
<div class="panel-options">
<a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>
<a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
<a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
</div>
</div>
<table class="table table-bordered table-responsive">
<thead>
<tr>
<th></th>
<th>用户名</th>
<th>密码</th>
<th>创建时间</th>
<th>用户头像</th>
</tr>
</thead>
<tbody>
{% for u in topUsers %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ u.username }}</td>
<td>{{ u.password }}</td>
<td class="text-center"><span class="pie">{{ u.creareTime }}</span></td>
<td class="text-center">
<img class="img-circle" src="/media/{{ u.avatar }}" width="32px" alt="">
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="panel panel-primary">
<div class="panel-heading">
<div class="col-sm-12">
<div class="col-sm-3">
<div class="tile-stats tile-green">
<div class="icon"><i class="entypo-chart-bar"></i></div>
<div class="num" data-start="0" data-end="{{ tagDic.jobslen }}" data-postfix=""
data-duration="1500"
data-delay="0">
{{ tagDic.jobslen }}
</div>
<h3>数据总量统计</h3>
</div>
</div>
<div class="col-sm-3">
<div class="tile-stats tile-blue">
<div class="icon"><i class="entypo-user"></i></div>
<div class="num" data-start="0" data-end="{{ tagDic.userslen }}" data-postfix=""
data-duration="1500" data-delay="0">
{{ tagDic.userslen }}</div>
<h3>用户数量统计</h3>
</div>
</div>
<div class="col-sm-3">
<div class="tile-stats tile-orange">
<div class="icon"><i class="entypo-mail"></i></div>
<div class="num" data-start="0" data-end="{{ tagDic.eduTop }}" data-postfix=""
data-duration="1500" data-delay="0">
{{ tagDic.eduTop }}</div>
<h3>行业最高学历</h3>
</div>
</div>
<div class="col-sm-3">
<div class="tile-stats tile-cyan">
<div class="icon"><i class="entypo-heart"></i></div>
<div class="num" data-start="0" data-end="{{ tagDic.salaryTop }}" data-postfix=""
data-duration="1500" data-delay="0">
{{ tagDic.salaryTop }}</div>
<h3>行业最高薪资</h3>
</div>
</div>
<div class="col-sm-3">
<div class="tile-stats tile-purple">
<div class="icon"><i class="entypo-suitcase"></i></div>
<div class="num" data-start="0" data-end="{{ tagDic.salaryMonthTop }}" data-postfix="" data-duration="1500" data-delay="0">
{{ tagDic.salaryMonthTop }}</div>
<h3>最高年底多薪</h3>
</div>
</div>
<div class="col-sm-3">
<div class="tile-stats tile-red">
<div class="icon"><i class="entypo-archive"></i></div>
<div class="num" data-postfix="" data-duration="1500" data-delay="0">
{% if tagDic.praticeMax %}
正常岗位
{% else %}
实习岗位
{% endif %}
</div>
<h3>岗位性质</h3>
</div>
</div>
<div class="col-sm-6">
<div class="tile-stats tile-brown">
<div class="icon"><i class="entypo-globe"></i></div>
<div class="num" data-end="{{ tagDic.addressTop }}" data-postfix=""
data-duration="1500" data-delay="0">
{{ tagDic.addressTop }} </div>
<h3>优势地点</h3>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-primary" data-collapsed="0">
<div class="panel-options">
</div>
<div class="panel-body" style="width: 100%;height: 350px">
<table class="table table-bordered datatable">
<h2>数据表</h2>
<br>
<thead>
<tr>
<th>id</th>
<th>title</th>
<th>type</th>
<th>edu</th>
<th>address</th>
<th>dist</th>
<th>workexp</th>
<th>salary</th>
<th>salaryMonth</th>
<th>companyTitle</th>
<th>companyNature</th>
<th>companyStatus</th>
<th>companyPeo</th>
<th>companyTags</th>
<th>workTag</th>
<th>urls</th>
</tr>
</thead>
<tbody>
{% for i in c_page %}
<tr>
<td>{{ i.id }}</td>
<td>{{ i.title }}</td>
<td>{{ i.type }}</td>
<td>{{ i.edu }}</td>
<td>{{ i.address }}</td>
<td>{{ i.dist }}</td>
<td>{{ i.workexp }}</td>
{% if i.pratice == '0' %}
<td>{{ i.salary }}K/月</td>
{% else %}
<td>{{ i.salary }}元/天</td>
{% endif %}
{% if i.salaryMonth == '0' %}
<td>0薪</td>
{% else %}
<td>{{ i.salaryMonth }}薪</td>
{% endif %}
<td>{{ i.companyTitle }}</td>
<td>{{ i.companyNature }}</td>
<td>{{ i.companyStatus }}</td>
<td>{{ i.companyPeo }}</td>
<td>{{ i.companyTags }}</td>
<td>{{ i.workTag }}</td>
<td>
<a href="{{ i.detailUrl }}">
<button type="button" class="btn btn-info" value="岗位详情">岗位详情 </button>
</a>
<a href="{{ i.companyUrl }}">
<button type="button" class="btn btn-success" value="公司详情">公司详情</button>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="row" style="display: flex;justify-content: center">
<ul class="pagination">
{% if c_page.has_previous %}
<li><a href="/myapp/home?page={{ c_page.previous_page_number }}"><i
class="entypo-left-open-mini"></i></a></li>
{% endif %}
{% for i in page_range %}
{% if i == c_page.number %}
<li class="active"><a href="/myapp/home?page={{ i }}">{{ i }}</a></li>
{% else %}
<li><a href="/myapp/home?page={{ i }}">{{ i }}</a></li>
{% endif %}
{% endfor %}
{% if c_page.has_next %}
<li><a href="/myapp/home?page={{ c_page.next_page_number }}"><i
class="entypo-right-open-mini"></i></a></li>
{% endif %}
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
</div>
</div>
<link rel="stylesheet" href="/static/css/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="/static/css/rickshaw.min.css">
<script src="/static/js/main-gsap.js"></script>
<script src="/static/js/jquery-ui-1.10.3.minimal.min.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script src="/static/js/joinable.js"></script>
<script src="/static/js/resizeable.js"></script>
<script src="/static/js/neon-api.js"></script>
<script src="/static/js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/static/js/jquery-jvectormap-europe-merc-en.js"></script>
<script src="/static/js/jquery-jvectormap-world-mill-en.js"></script>
<script src="/static/js/jquery.sparkline.min.js"></script>
<script src="/static/js/d3.v3.js"></script>
<script src="/static/js/rickshaw.min.js"></script>
<script src="/static/js/neon-chat.js"></script>
<script src="/static/js/neon-custom.js"></script>
<script src="/static/js/neon-demo.js"></script>
<script src="/static/js/echarts.min.js"></script>
<script src="/static/js/jquery.dataTables.min.js"></script>
<script src="/static/js/TableTools.min.js"></script>
<script src="/static/js/dataTables.bootstrap.js"></script>
<script src="/static/js/jquery.dataTables.columnFilter.js"></script>
<script src="/static/js/lodash.min.js"></script>
<script src="/static/js/datatables.responsive.js"></script>
<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '用户数量',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 10,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: {{ userCreateData | safe }}
}
]
};
option && myChart.setOption(option);
</script>
</body>
</html>4.5个人信息页面
4.5.1 修改个人信息页面
在views，编写修改个人信息的代码
def selfInfo(request):
uname = request.session['username']
userInfo = User.objects.get(username=uname)
#调用学历，经验和岗位类型的列表函数
edus, workexp, joblist = getSelfInfo.getPage()
if request.method == 'POST':
#调用更改学历、经验、地址、工作和头像的信息的函数
getSelfInfo.changeSelfInfo(request.POST, request.FILES)
userInfo = User.objects.get(username=uname)
return render(request, 'selfInfo.html', {
'userInfo': userInfo,
'pageData': {
'edus': edus,
'workexp': workexp,
'joblist': joblist
}
})对个修改人信息的分析，写在/myapp/utils中的getSelfInfo.py中，在views调用函数方法
from .getPublicData import *
from myapp.models import User
#学历，经验和岗位类型的列表，作为html下拉菜单的数据
def getPage():
jobs = getAllJobs()
jobType = {}
for job in jobs:
if jobType.get(job.type, -1) == -1:
jobType[job.type] = 1
else:
jobType[job.type] += 1
return list(edus.keys()), workexp, list(jobType.keys())
#更改学历、经验、地址、工作和头像的信息
def changeSelfInfo(newInfo, fileInfo):
user = User.objects.get(username=newInfo.get('username'))
user.edu = newInfo.get('edu')
user.workexp = newInfo.get('workexp')
user.address = newInfo.get('address')
user.work = newInfo.get('work')
if fileInfo.get('avatar') != None:
user.avatar = fileInfo.get('avatar')
user.save()在/myapp/templates/下新建selfInfo.html页面，编写网页代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Neon Admin Panel">
<meta name="author" content="">
<title>个人信息修改</title>
<link rel="stylesheet" href="/static/css/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="/static/css/entypo.css">
<link rel="stylesheet" href="/static/css/css.css">
<link rel="stylesheet" href="/static/css/bootstrap.css">
<link rel="stylesheet" href="/static/css/neon-core.css">
<link rel="stylesheet" href="/static/css/neon-theme.css">
<link rel="stylesheet" href="/static/css/neon-forms.css">
<link rel="stylesheet" href="/static/css/custom.css">
<script src="/static/js/jquery-1.11.0.min.js"></script>
<script src="/assets/js/ie8-responsive-file-warning.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body class="page-body page-left-in" data-url="http://neon.dev">
<div class="page-container">
<div class="sidebar-menu">
<header class="logo-env">
<div class="logo">
<a href="index.html">
<h3 style="color: #fff1f0;font-weight: bold;margin-top: 5px">BOSS数据可视化</h3>
</a>
</div>
</header>
<div class="sidebar-user-info">
<div class="sui-normal">
<a href="#" class="user-link">
<img style="width: 95%;border-radius: 50%" src="/media/{{ userInfo.avatar }}" width="120" alt=""><br>
<span style="text-align: center;padding-top: 209px">欢迎回来,</span>
<strong style="text-align: center;margin-top: 5px">{{ userInfo.username }}</strong>
</a>
</div>
<ul id="main-menu" class="">
<li >
<a href="/myapp/home">
<i class="entypo-gauge"></i>
<span>首页</span>
</a>
</li>
<li class="opened active">
<a href="#">
<i class="entypo-user"></i>
<span>个人中心</span>
</a>
<ul>
<li class="active">
<a href="/myapp/selfInfo">
<span>个人信息</span>
</a>
</li>
<li>
<a href="/myapp/changePW">
<span>修改密码</span>
</a>
</li>
</ul>
</li>
<li>
<a href="/myapp/tableData">
<i class="entypo-newspaper"></i>
<span>数据总览</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-chart-bar"></i>
<span>可视化</span>
</a>
<ul>
<li>
<a href="/myapp/salary">
<i class="entypo-light-down"></i>
<span>薪资</span>
</a>
</li>
<li>
<a href="/myapp/company">
<i class="entypo-feather"></i>
<span>企业</span>
</a>
</li>
<li>
<a href="/myapp/companyTags">
<i class="entypo-lamp"></i>
<span>福利</span>
</a>
</li>
<li>
<a href="/myapp/edu">
<i class="entypo-graduation-cap"></i>
<span>学历分布</span>
</a>
</li>
<li>
<a href="/myapp/companyStatus">
<i class="entypo-network"></i>
<span>企业融资</span>
</a>
</li>
<li>
<a href="/myapp/address">
<i class="entypo-rocket"></i>
<span>城市类型</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<div class="row" style="display: flex">
<div style="margin-left: auto" class="col-md-6 col-sm-4 clearfix hidden-xs">
<ul class="list-inline links-list pull-right">
<li class="sep"></li>
<li>
<a href="/myapp/logout">
注销 <i class="entypo-logout right"></i>
</a>
</li>
</ul>
</div>
</div>
<hr>
<ol class="breadcrumb bc-3">
<li>
<a href="#"><i class="entypo-home"></i>个人中心</a>
</li>
<li class="active">
<strong>个人信息</strong>
</li>
</ol>
<h2>个人信息修改</h2>
<br>
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary" data-collapsed="0">
<div class="panel-heading">
<div class="panel-options">
<a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>
<a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
<a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
<a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
</div>
</div>
<div class="panel-body">
<form role="form" enctype="multipart/form-data" method="POST" action="/myapp/selfInfo/" class="form-horizontal form-groups-bordered">
<div class="form-group">
<label for="field-1" class="col-sm-3 control-label">用户名</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="username" id="field-1"
value="{{ userInfo.username }}" readonly placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="field-2" class="col-sm-3 control-label">学历</label>
<div class="col-sm-5">
<select name="edu" class="form-control">
{% for e in pageData.edus %}
{% if e == userInfo.edu %}
<option selected value="{{ e }}">{{ e }}</option>
{% else %}
<option value="{{ e }}">{{ e }}</option>
{% endif %}
{% endfor %}
</select>
</div>
</div>
<div class="form-group">
<label for="field-3" class="col-sm-3 control-label">工作经验</label>
<div class="col-sm-5">
<select name="workexp" class="form-control">
{% for e in pageData.workexp %}
{% if e == userInfo.workexp %}
<option selected value="{{ e }}">{{ e }}</option>
{% else %}
<option value="{{ e }}">{{ e }}</option>
{% endif %}
{% endfor %}
</select>
</div>
</div>
<div class="form-group">
<label for="field-1" class="col-sm-3 control-label">意向城市</label>
<div class="col-sm-5">
<input type="text" name="address" class="form-control" id="field-1"
value="{{ userInfo.address }}" placeholder="请输入意向城市">
</div>
</div>
<div class="form-group">
<label for="field-1" class="col-sm-3 control-label">意向岗位</label>
<div class="col-sm-5">
<select name="work" class="form-control">
{% for e in pageData.joblist %}
{% if e == userInfo.work %}
<option selected value="{{ e }}">{{ e }}</option>
{% else %}
<option value="{{ e }}">{{ e }}</option>
{% endif %}
{% endfor %}
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">上传头像</label>
<div class="col-sm-5">
<div class="fileinput fileinput-new" data-provides="fileinput">
<input type="hidden">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;" data-trigger="fileinput">
<img src="/media/{{ userInfo.avatar }}" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail"
style="max-width: 200px; max-height: 150px; line-height: 6px;"></div>
<div>
<span class="btn btn-white btn-file">
<span class="fileinput-new">选择头像</span>
<span class="fileinput-exists">更改</span>
<input type="file" name="avatar" accept="image/*">
</span>
<a href="#" class="btn btn-orange fileinput-exists"
data-dismiss="fileinput">删除</a>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-5">
<button type="submit" class="btn btn-success">提交</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="/static/css/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="/static/css/rickshaw.min.css">
<script src="/static/js/fileinput.js"></script>
<script src="/static/js/main-gsap.js"></script>
<script src="/static/js/jquery-ui-1.10.3.minimal.min.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script src="/static/js/joinable.js"></script>
<script src="/static/js/resizeable.js"></script>
<script src="/static/js/neon-api.js"></script>
<script src="/static/js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/static/js/jquery-jvectormap-europe-merc-en.js"></script>
<script src="/static/js/jquery-jvectormap-world-mill-en.js"></script>
<script src="/static/js/jquery.sparkline.min.js"></script>
<script src="/static/js/d3.v3.js"></script>
<script src="/static/js/rickshaw.min.js"></script>
<script src="/static/js/neon-chat.js"></script>
<script src="/static/js/neon-custom.js"></script>
<script src="/static/js/neon-demo.js"></script>
<script src="/static/js/echarts.min.js"></script>
</body>
</html>4.5.2修改密码
在views，编写修改密码的代码
def changePW(request):
uname = request.session['username']
userInfo = User.objects.get(username=uname)
if request.method == 'POST':
res = getChangePW.ChangePW(userInfo, request.POST)
if res != None:
return error(request, res)
userInfo = User.objects.get(username=uname)
return render(request, 'changePW.html', {
'userInfo': userInfo
})对个修改密码的分析，写在/myapp/utils中的getChangePW.py中，在views调用函数方法
from myapp.models import User
import hashlib
def ChangePW(userInfo, passwordInfo):
oldPwd = passwordInfo['oldPassword']
newPwd = passwordInfo['newPassword']
checkNewPwd = passwordInfo['checkNewPassword']
user = User.objects.get(username=userInfo.username)
mds = hashlib.md5()
mds.update(oldPwd.encode())
oldPwd = mds.hexdigest()
if oldPwd == '':
return '原始密码不能为空'
elif newPwd == '':
return '新密码不能为空'
else:
if len(newPwd) < 8 or len(newPwd) > 16:
return '密码不符合规则'
if oldPwd != user.password:
return '原始密码不正确'
if newPwd != checkNewPwd:
return '新密码与确认密码不符合'
mds = hashlib.md5()
mds.update(newPwd.encode())
newPwd = mds.hexdigest()
user.password = newPwd
user.save()在/myapp/templates/下新建changePW.html页面，编写网页代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Neon Admin Panel">
<meta name="author" content="">
<title>密码修改</title>
<link rel="stylesheet" href="/static/css/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="/static/css/entypo.css">
<link rel="stylesheet" href="/static/css/css.css">
<link rel="stylesheet" href="/static/css/bootstrap.css">
<link rel="stylesheet" href="/static/css/neon-core.css">
<link rel="stylesheet" href="/static/css/neon-theme.css">
<link rel="stylesheet" href="/static/css/neon-forms.css">
<link rel="stylesheet" href="/static/css/custom.css">
<script src="/static/js/jquery-1.11.0.min.js"></script>
<script src="/assets/js/ie8-responsive-file-warning.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body class="page-body page-left-in" data-url="http://neon.dev">
<div class="page-container">
<div class="sidebar-menu">
<header class="logo-env">
<div class="logo">
<a href="index.html">
<h3 style="color: #fff1f0;font-weight: bold;margin-top: 5px">岗位数据可视化</h3>
</a>
</div>
</header>
<div class="sidebar-user-info">
<div class="sui-normal">
<a href="#" class="user-link">
<img style="width: 95%;border-radius: 50%" src="/media/{{ userInfo.avatar }}" width="120" alt=""><br>
<span style="text-align: center;padding-top: 209px">欢迎回来,</span>
<strong style="text-align: center;margin-top: 5px">{{ userInfo.username }}</strong>
</a>
</div>
</div>
<ul id="main-menu" class="">
<li>
<a href="/myapp/home">
<i class="entypo-gauge"></i>
<span>首页</span>
</a>
</li>
<li class="opened active">
<a href="#">
<i class="entypo-user"></i>
<span>个人中心</span>
</a>
<ul>
<li>
<a href="/myapp/selfInfo">
<span>个人信息</span>
</a>
</li>
<li class="active">
<a href="/myapp/changePW">
<span>修改密码</span>
</a>
</li>
</ul>
</li>
<li>
<a href="/myapp/tableData">
<i class="entypo-newspaper"></i>
<span>数据总览</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-chart-bar"></i>
<span>可视化</span>
</a>
<ul>
<li>
<a href="/myapp/salary">
<i class="entypo-light-down"></i>
<span>薪资</span>
</a>
</li>
<li>
<a href="/myapp/company">
<i class="entypo-feather"></i>
<span>企业</span>
</a>
</li>
<li>
<a href="/myapp/companyTags">
<i class="entypo-lamp"></i>
<span>福利</span>
</a>
</li>
<li>
<a href="/myapp/edu">
<i class="entypo-graduation-cap"></i>
<span>学历分布</span>
</a>
</li>
<li>
<a href="/myapp/companyStatus">
<i class="entypo-network"></i>
<span>企业融资</span>
</a>
</li>
<li>
<a href="/myapp/address">
<i class="entypo-rocket"></i>
<span>城市类型</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<div class="row" style="display: flex">
<div style="margin-left: auto" class="col-md-6 col-sm-4 clearfix hidden-xs">
<ul class="list-inline links-list pull-right">
<li class="sep"></li>
<li>
<a href="/myapp/logout">
注销 <i class="entypo-logout right"></i>
</a>
</li>
</ul>
</div>
</div>
<hr>
<ol class="breadcrumb bc-3">
<li>
<a href="#">
<i class="entypo-home"></i>
个人中心
</a>
</li>
<li>
<strong>修改密码</strong>
</li>
</ol>
<h2>修改密码</h2>
<br>
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary" data-collapsed="0">
<div class="panel-heading">
<div class="panel-options">
<a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>
<a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
<a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
<a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
</div>
</div>
<div class="panel-body">
<form role="form" method="POST" action="/myapp/changePW/"
class="form-horizontal form-groups-bordered">
<div class="form-group">
<label for="field-1" class="col-sm-3 control-label">原始密码</label>
<div class="col-sm-5">
<input type="password" class="form-control" name="oldPassword" id="field-1" placeholder="请输入原始密码">
</div>
</div>
<div class="form-group">
<label for="field-1" class="col-sm-3 control-label">新密码</label>
<div class="col-sm-5">
<input type="password" class="form-control" name="newPassword" id="field-1" placeholder="请输入新密码">
</div>
</div>
<div class="form-group">
<label for="field-1" class="col-sm-3 control-label">确认密码</label>
<div class="col-sm-5">
<input type="password" class="form-control" name="checkNewPassword" id="field-1" placeholder="请确认输入新密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-5">
<button type="submit" class="btn btn-success">提交</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="/static/css/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="/static/css/rickshaw.min.css">
<script src="/static/js/fileinput.js"></script>
<script src="/static/js/main-gsap.js"></script>
<script src="/static/js/jquery-ui-1.10.3.minimal.min.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script src="/static/js/joinable.js"></script>
<script src="/static/js/resizeable.js"></script>
<script src="/static/js/neon-api.js"></script>
<script src="/static/js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/static/js/jquery-jvectormap-europe-merc-en.js"></script>
<script src="/static/js/jquery-jvectormap-world-mill-en.js"></script>
<script src="/static/js/jquery.sparkline.min.js"></script>
<script src="/static/js/d3.v3.js"></script>
<script src="/static/js/rickshaw.min.js"></script>
<script src="/static/js/neon-chat.js"></script>
<script src="/static/js/neon-custom.js"></script>
<script src="/static/js/neon-demo.js"></script>
<script src="/static/js/echarts.min.js"></script>
</body>
</html>4.6数据总览页面
在views，编写数据总览的代码
def tableData(request):
uname = request.session['username']
userInfo = User.objects.get(username=uname)
#调用数据分析函数
tableDt = getTableData.getTableData()
pageinator = Paginator(tableDt, 10)
cur_page = 1
if request.GET.get('page'):
cur_page = int(request.GET.get('page'))
c_page = pageinator.page(cur_page)
page_range = []
visbleNum = 10
min = int(cur_page - visbleNum / 10)
if min < 1:
min = 1
max = min + visbleNum
if max > pageinator.page_range[-1]:
max = pageinator.page_range[-1]
for i in range(min, max):
page_range.append(i)
return render(request, 'tableData.html', {
'userInfo': userInfo,
'c_page': c_page,
'page_range': page_range,
'pageinator': pageinator,
})对数据总览分析，写在/myapp/utils中的getTableData.py中，在views调用函数方法
import json
from myapp.models import JobInfo
#数据分析
def getTableData():
jobs = list(JobInfo.objects.all())
for i in jobs:
i.workTag = json.loads(i.workTag)
if i.companyTags != '无':
i.companyTags = json.loads(i.companyTags)[0].split('，')
if i.companyPeo == '[0, 10000]':
i.companyPeo = '10000人以上'
else:
i.companyPeo = json.loads(i.companyPeo)
i.companyPeo = list(map(lambda x: str(x), i.companyPeo))
i.companyPeo = ('-'.join(i.companyPeo) + '人')
i.salary = json.loads(i.salary)
if not int(i.pratice) == 1:
i.salary = list(map(lambda x: str(int(x / 1000)), i.salary))
else:
i.salary = list(map(lambda x: str(int(x)), i.salary))
i.salary = '-'.join(i.salary)
return jobs在/myapp/templates/下新建tableData.html页面，编写网页代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Neon Admin Panel">
<meta name="author" content="">
<title>数据总览</title>
<link rel="stylesheet" href="/static/css/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="/static/css/entypo.css">
<link rel="stylesheet" href="/static/css/css.css">
<link rel="stylesheet" href="/static/css/bootstrap.css">
<link rel="stylesheet" href="/static/css/neon-core.css">
<link rel="stylesheet" href="/static/css/neon-theme.css">
<link rel="stylesheet" href="/static/css/neon-forms.css">
<link rel="stylesheet" href="/static/css/custom.css">
<script src="/static/js/jquery-1.11.0.min.js"></script>
<script src="/assets/js/ie8-responsive-file-warning.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body class="page-body page-left-in" data-url="http://neon.dev">
<div class="page-container">
<div class="sidebar-menu">
<header class="logo-env">
<div class="logo">
<a href="index.html">
<h3 style="color: #fff1f0;font-weight: bold;margin-top: 5px">岗位数据可视化</h3>
</a>
</div>
</header>
<div class="sidebar-user-info">
<div class="sui-normal">
<a href="#" class="user-link">
<img style="width: 95%;border-radius: 50%" src="/media/{{ userInfo.avatar }}" width="120" alt=""><br>
<span style="text-align: center;padding-top: 209px">欢迎回来,</span>
<strong style="text-align: center;margin-top: 5px">{{ userInfo.username }}</strong>
</a>
</div>
</div>
<ul id="main-menu" class="">
<li>
<a href="/myapp/home">
<i class="entypo-gauge"></i>
<span>首页</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-user"></i>
<span>个人中心</span>
</a>
<ul>
<li>
<a href="/myapp/selfInfo">
<span>个人信息</span>
</a>
</li>
<li>
<a href="/myapp/changePW">
<span>修改密码</span>
</a>
</li>
</ul>
</li>
<li>
<a href="/myapp/tableData">
<i class="entypo-newspaper"></i>
<span>数据总览</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-chart-bar"></i>
<span>可视化</span>
</a>
<ul>
<li>
<a href="/myapp/salary">
<i class="entypo-light-down"></i>
<span>薪资</span>
</a>
</li>
<li>
<a href="/myapp/company">
<i class="entypo-feather"></i>
<span>企业</span>
</a>
</li>
<li>
<a href="/myapp/companyTags">
<i class="entypo-lamp"></i>
<span>福利</span>
</a>
</li>
<li>
<a href="/myapp/edu">
<i class="entypo-graduation-cap"></i>
<span>学历分布</span>
</a>
</li>
<li>
<a href="/myapp/companyStatus">
<i class="entypo-network"></i>
<span>企业融资</span>
</a>
</li>
<li>
<a href="/myapp/address">
<i class="entypo-rocket"></i>
<span>城市类型</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<div class="row" style="display: flex">
<div style="margin-left: auto" class="col-md-6 col-sm-4 clearfix hidden-xs">
<ul class="list-inline links-list pull-right">
<li class="sep"></li>
<li>
<a href="/myapp/logout">
注销 <i class="entypo-logout right"></i>
</a>
</li>
</ul>
</div>
</div>
<hr>
<div class="pull-right">
<button type="button" class="btn btn-info" id="renewdata">更新数据</button>
</div>
<ol class="breadcrumb bc-3">
<li>
<a href="#">
<i class="entypo-home"></i>
数据统计
</a>
</li>
<li>
<strong>数据总览</strong>
</li>
</ol>
<h2>数据总览</h2>
<br>
<div class="row">
<div class="col-md-12">
{% for i in c_page %}
<div class="member-entry">
<a href="{{ i.companyUrl }}" class="member-img">
<img src="{{ i.companyAvater }}">
<i class="entypo-forward"></i>
</a>
<div class="member-details">
<h4>
<a href="{{ i.companyUrl }}"
style="font-weight: bold;color: #00b29e">{{ i.companyTitle }}</a>
</h4>
<div class="row info-list">
<div class="col-sm-4">
<i class="entypo-briefcase"></i>
<a class="text-info" href="{{ i.detailUrl }}">{{ i.title }}</a>
</div>
<div class="col-sm-4">
<i class="entypo-star"></i>
<a href="#">
{% if i.pratice == '0' %}
{{ i.salary }}K/月
{% if salaryMonth != 0 %}
·{{ i.salaryMonth }}薪
{% endif %}
{% else %}
{{ i.salary }}元/天
{% endif %}
</a>
</div>
<div class="col-sm-4">
<i class="entypo-facebook"></i>
<a href="#">
{{ i.workexp }}|{{ i.edu }}|{{ i.type }}
</a>
</div>
<div class="clear"></div>
<div class="col-sm-4">
<i class="entypo-location"></i>
<a href="#">{{ i.address }}</a>
</div>
<div class="col-sm-4">
<i class="entypo-mail"></i>
<a href="#">{{ i.hrWork }} ->{{ i.hrName }}</a>
</div>
<div class="col-sm-4">
<i class="entypo-linkedin"></i>
<a href="#">{{ i.companyStatus }}|{{ i.companyPeo }}</a>
</div>
<div class="col-sm-6">
{% for i in i.workTag %}
{% if i != '' %}
<code>{{ i }}</code>
{% endif %}
{% endfor %}
</div>
<div class="col-sm-6">
{% if i.companyTags != '无' %}
{% for i in i.companyTags %}
{% if i != '' %}
<code style="margin-bottom: 3px;display: inline-block">
{{ i }}</code>
{% endif %}
{% endfor %}
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="row" style="display: flex;justify-content: center">
<ul class="pagination">
{% if c_page.has_previous %}
<li><a href="/myapp/tableData?page={{ c_page.previous_page_number }}"><i
class="entypo-left-open-mini"></i></a></li>
{% endif %}
{% for i in page_range %}
{% if i == c_page.number %}
<li class="active"><a href="/myapp/tableData?page={{ i }}">{{ i }}</a></li>
{% else %}
<li><a href="/myapp/tableData?page={{ i }}">{{ i }}</a></li>
{% endif %}
{% endfor %}
{% if c_page.has_next %}
<li><a href="/myapp/tableData?page={{ c_page.next_page_number }}"><i
class="entypo-right-open-mini"></i></a></li>
{% endif %}
</ul>
</div>
</div>
</div>
<link rel="stylesheet" href="/static/css/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="/static/css/rickshaw.min.css">
<script src="/static/js/fileinput.js"></script>
<script src="/static/js/main-gsap.js"></script>
<script src="/static/js/jquery-ui-1.10.3.minimal.min.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script src="/static/js/joinable.js"></script>
<script src="/static/js/resizeable.js"></script>
<script src="/static/js/neon-api.js"></script>
<script src="/static/js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/static/js/jquery-jvectormap-europe-merc-en.js"></script>
<script src="/static/js/jquery-jvectormap-world-mill-en.js"></script>
<script src="/static/js/jquery.sparkline.min.js"></script>
<script src="/static/js/d3.v3.js"></script>
<script src="/static/js/rickshaw.min.js"></script>
<script src="/static/js/neon-chat.js"></script>
<script src="/static/js/neon-custom.js"></script>
<script src="/static/js/neon-demo.js"></script>
<script src="/static/js/echarts.min.js"></script>
{#更新数据#}
<script>
$(document).ready(function () {
$("#renewdata").click(function () {
$.ajax({
url: "{% url 'renewData' %}", type: "GET", success: function (data) {
alert("数据更新成功！");
}, error: function () {
alert("数据更新失败！");
}
});
});
});
</script>
</body>
</html>
扫一扫
1931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
