python设计网站

Posted 109-梁浩辉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了python设计网站相关的知识,希望对你有一定的参考价值。

系统概要说明

现在,随着物联网以及网络技术的飞速发展,互联网已经成为了人们发布与获取信息的重要途径之一,所以通过老师要求,我们设计了一个普通的公司管理信息系统网站。这网站的具有的功能有注册,登录,注销,发布,列表展示,详情页,评论(列表显示),个人中心,搜索,条件组合搜索,文章分类,显示,点赞,收藏,修改密码,上传头像,我的发布(点赞),高级搜索等一系列功能。

 

一.网站结构设计

 

二.模块详细设计

2.1基本功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}首页</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
   
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
   
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="{{ url_for(\'static\',filename=\'js/switch.js\') }}"></script>
    <link rel="stylesheet"  type="text/css" href="{{ url_for(\'static\',filename=\'css/base.css\') }}">

{% block head %}{% endblock %}
</head>
<body id="myBody" style="background-image:url(/static/img/2345_image_file_copy_4.jpg)">
<nav class="navbar">
    <img src="{{ url_for(\'static\',filename=\'img/1.jpg\') }}" alt="" width="50px">
    <a href="{{ url_for(\'index\') }}">首页</a>
    <a href="{{ url_for(\'questions\') }}">提问</a>
    <form action="{{ url_for(\'search\')}}" method="get" class="navbar-form navbar-right">
    <input name="q" type="text" name="title" required lay-verify="required" placeholder="请输入搜索内容" autocomplete="off"
          
class="layui-input">
    <button class="seek" style="padding-left: 10px;" type="submit">搜索</button>
    </form>
{% if username %}
    <a href="{{ url_for(\'usercenter\',user_id=user.id,tag=1) }}">{{user.username }}</a>
{#    <a href="#">{{ username }}</a>#}
    <a href="{{ url_for(\'logout\') }}">注销</a>
    {% else %}
    <a class="login" href="{{ url_for(\'login\') }}">登录</a>
    <a class="enroll" href="{{ url_for(\'enroll\') }}">注册</a>
{% endif %}
    <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="25px">
</nav>




{% block main %}
<div>
    <ul>
        {% for foo in fenlei %}
        <li><a href="{{url_for(\'index\',bd= foo.id)}}">{{foo.name}}</a></li>
        {% endfor %}
    </ul>
</div>
    <ul class="list-group">
        {% for foo in questions %}
            <li class="list-group-item"
               
style="padding-left: 0px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 0px 0px; width: 600px;margin: auto">
                <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
                <a href="{{ url_for(\'detail\',questions_id=foo.id) }}">{{ foo.title }}</a>{#链接到相关详情页#}
                <span class="badge" >{{ foo.create_time }}</span>
                <p style="margin: 20px">{{ foo.detail }}</p>
                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                <a href="{{ url_for(\'usercenter\',user_id=foo.author_id,tag=1) }}">{{ foo.author.username }}评论:({{ foo.comments|length }})</a><br>
            </li>
        {% endfor %}
    </ul>
{% endblock %}

</body>

<footer>
    <div class="footer_box">
        版权@LHH
    </div>
</footer>
</html>
首页基本页面显示功能,其中包含提问,搜索,注销,登录,注册等显示

 

2.2问答详情功能

   {% extends\'base.html\' %}

{% block title %}问答详情{% endblock %}
{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for(\'static\',filename=\'css/detail.css\') }}">
{% endblock %}

{% block main %}
    <div class="page-header">
        <h3 align="center">题目:{{ questions.title }}<br>
            <small>作者:{{ questions.author.username }} <span class="badge">发布时间:{{ questions.create_time }}</span>
            </small>
        </h3>
    </div>
    <p class="lead" align="center">详情:{{ questions.detail }}</p><br>

    <form action="{{ url_for(\'dianzan\') }}"method="post" >

        <input type="hidden" name="questions_id" value="{{questions.id }}">
        <input type="hidden" name="user_id" value="{{ userid }}">
        {% if dzyes %}
            <span>点赞数:{{ questions.dianzan|length }}</span>
        {% else %}
            <button type="submit">点赞</button>
        {% endif %}
    </form>
    <form action="{{ url_for(\'collection\') }}" method="post">
        <input type="hidden" name="questions_id" value="{{ questions.id }}">
        <input type="hidden" name="user_id" value="{{ userid }}">
        {% if collection %}
            <span>已收藏</span>
        {% else %}
            <button type="submit">收藏</button>
        {% endif %}
    </form>

    {#发布评论#}
    <form action="{{ url_for(\'comments\') }}" method="post" style="margin: 20px">
        <div class="form-group" align="center">
            <textarea name="new_comment" class="form-control" rows="3" id="new-comment"
                     
placeholder="请写下你的评论" style="width:600px; margin: auto"></textarea>
            <input type="hidden" name="questions_id" value="{{ questions.id }}">
            <button type="submit" class="btn btn-default">发送</button>
        </div>

    </form>


    {# 评论列表#}
    <h4 align="center">评论({{ questions.comments|length }})</h4>
    <ul class="list-group" style="margin: 10px">
        {% for foo in  questions.comments %}
            <li class="list-group-item" style="width: 600px ;margin: auto">
                <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
                <a href="{{ url_for(\'usercenter\',user_id=foo.author.id,tag=1) }}">{{ foo.author.username }}</a>
                <span class="badge">{{ foo.create_time }}</span>
                <p>{{ foo.detail }}</p>
            </li>
        {% endfor %}
    </ul>
{% endblock %}

问答详情功能里面包含点赞功能,收藏,评论功能。

2.3注册功能

{% extends\'base.html\' %}
{% block title %}注册{% endblock %}
{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for(\'static\',filename=\'css/enroll.css\') }}">
    <script src="{{ url_for(\'static\',filename=\'js/enroll.js\') }}"></script>
{% endblock %}


{% block main %}
<div class="box">
    <h2>注册</h2>
    <form action="{{ url_for(\'enroll\') }}" method="post">
    <div class="input_box">
        username:<input  id="zname" type="text"placeholder="设置您的用户名" name="username"><br>
        <!--yourname:<input  id="znickname" type="text"placeholder="设置您的昵称" name="nickname">-->
   
</div>
    <div class="input_box">
        password:<input  id="zpass1" type="password"placeholder="设置您的密码" name="password"><br>
    <!--</div>-->
    <!--<div class="input-box">-->
       
twowrite:<input id="zpass2" type="password" placeholder="重新输入一样的密码">
    </div>
        <div class="input_box">
        <a href="{{ url_for(\'login\') }}" style="margin: 10px">已有账号,登录</a>
    </div>

    <div id="error_box"><br></div>
    <div class="input_box">
        <button class="button" onclick="fnEnroll()">立即注册</button>
    </div>
    </form>
</div>
{% endblock %}

 

2.4登录功能

{% extends\'base.html\' %}
{% block title %}登录{% endblock %}
{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for(\'static\',filename=\'css/login.css\') }}">
    <script src="{{ url_for(\'static\',filename=\'/js/login.js\')}}"></script>
{% endblock %}

{% block main %}

<div class="box">
    <h2>登录</h2>
    <form action="{{ url_for(\'login\') }}" method="post">
    <div class="input_box">
        username:<input id="uname" type="text"placeholder="请输入用户名" name="username">
    </div>
    <div class="input_box">
        yourname<input id="unickname" type="text"placeholder="请输入昵称" name="nickname">
    </div>
    <div class="input_box">
        password:<input  id="upass" type="password"placeholder="请输入密码" name="password">
    </div>

    <div class="input_box">
        <a href="{{ url_for(\'enroll\') }}">没有账号?立即注册</a>
    </div>

    <div id="error_box"><br></div>
    <div class="input_box">
        <button class="button"  onclick="fnLogin()">登录</button>
    </div>
    </form>
</div>
{% endblock %}

2.5 发布问答功能

{% extends\'base.html\' %}
{% block title %}发布问答{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for(\'static\',filename=\'css/questions.css\') }}" type="text/css">
{% endblock %}

{% block main %}
    <div class="box">
        <h2>发布问答</h2>
        <form action="{{ url_for(\'questions\') }}" method="post">
            <div class="input-box">
                <lable for="title">标题</lable>
                <textarea class="form-control" id="title" rows="1" cols="50" name="title"></textarea>
            </div>
            <div class="input-box">
                <select name="fenlei_id" id="">
                    {% for foo in fenlei %}
                    <option value="{{foo.id}}">{{foo.name}}</option>
                     {% endfor %}
                </select>
            </div>
            <div class="input-box">
                <lable for="detail">详情</lable>
                <textarea class="form-control" id="detail" rows="5" cols="50" name="detail"></textarea>
            </div>
            <input type="checkbox">记住我<br>
            <div class="input-box">
                <button class="button">发布问答</button>
            </div>

        </form>
    </div>

{% endblock %}

2.6修改密码功能

{% extends\'base.html\' %}
{% block title %}修改密码{% endblock %}
{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for(\'static\',filename=\'css/login.css\') }}">
    <script src="{{ url_for(\'static\',filename=\'/js/login.js\')}}"></script>
{% endblock %}

{% block main %}

<div class="box">
    <h2>修改密码</h2>
    <form action="{{ url_for(\'updata_password\',user_id=user.id) }}" method="post">
    <div class="input_box">
        oldpwd:<input id="uname" type="text"placeholder="请输入原密码" name="oldpwd">
    </div>
    <div class="input_box">
        newpwd:<input id="unickname" type="text"placeholder="请输入新密码" name="newpwd">
    </div>
    <div class="input_box">
        newpwd1:<input  id="upass" type="password"placeholder="请确认密码" name="newpwd1">
    </div>

    <!--<div class="input_box">-->
        <!--<a href="{{ url_for(\'enroll\') }}">
没有账号?立即注册</a>-->
    <!--</div>-->

   
<div id="error_box"><br></div>
    <div class="input_box">
        <button class="button" type="submit"  onclick="fnLogin()">登录</button>
    </div>
    </form>
</div>
{% endblock %}

 

2.7个人中心功能

{% extends "base.html" %}
{% block title %}个人中心{% endblock %}
{% block head %}
    <style>
        .nav nav-tabs li{
            list-style: none;
            float: left;
            margin: 25px;
        }

    </style>
{% endblock %}

{% block main %}
    <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ user.username }}</h3>
    <ul class="nav nav-tabs">
    <li role="presentation"><a href="{{ url_for(\'usercenter\',user_id=user.id,tag=1) }}">全部问答</a></li>
    <li role="presentation"><a href="{{ url_for(\'usercenter\',user_id=user.id,tag=2) }}">全部评论</a></li>
    <li role="presentation"><a href="{{ url_for(\'usercenter\',user_id=user.id,tag=3) }}">个人信息</a></li>
    </ul>

    {% block user %}{% endblock %}

{% endblock %}

2.8评论功能

{% extends \'user.html\' %}


{% block user %}
    <div class="page-header">
    <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ username }}<br>
        <small>全部评论<span class="badge"></span></small>
    </h3>
    <ul class="list-group">
        {% for foo in comments %}
        <li class="list-group-item">
            <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
            <a href="{{ url_for(\'usercenter\',user_id=foo.author_id ,tag=2)}}">{{ foo.author.username }}</a>
            <span class="badge">{{ foo.create_time }}</span>
            <p>{{ foo.detail }}</p>

        </li>
        {% endfor %}
    </ul>
</div>
{% endblock %}

 

2.9个人信息功能

{% extends \'user.html\' %}

{% block user %}
    <div class="page-header">
    <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ username }}<br>
        <small>个人信息<span class="badge"></span></small>
    </h3>
    <ul class="list-group">
        <li class="list-group-item">
            {% if user.img %}
                <img src="/static/{{ user.img }}" alt="" width="150px" height="200px">
            {% else %}
                 无上传图片
            {% endif %}
            <form action="{{ url_for(\'img\',user_id=user.id )}}" method="post" enctype="multipart/form-data">
            <input type="file" required name="img">
        <button type="submit">上传</button>
                </form>
        </li>
        <li class="list-group-item">用户:{{ user.username }}</li>
        <li class="list-group-item">编号:{{ user.id }}</li>
        <li class="list-group-item">昵称:{{ nickname }}</li>
        <li class="list-group-item">评论次数:{{ comments|length }}</li>
        <li class="list-group-item">问答次数:{{ questions|length }}</li>
        <li class="list-group-item"><a href="{{ url_for(\'updata_password\',user_id=user.id) }}">修改密码</a></li>
    </ul>
</div>
{% endblock %}

 

 

 

三.数据库设计

3.1注册

function fnEnroll() {
            var oZname=document.getElementById("zname");
            var oZpass1=document.getElementById("zpass1");
            var oZpass2=document.getElementById("zpass2");
            var oError=document.getElementById("error_box");
            var isError=true;

            oError.innerHTML="<br>"

           
if ((oZname.value.length < 6) || (oZname.value.length > 12)) {
                oError.innerHTML = "用户名要6-12位";
                isError=false;
                return isError;
            }else if ((oZname.value.charCodeAt(0)>=48)&&(oZname.value.charCodeAt(0)<=57)){
                oError.innerHTML="首字母必须是字母";
                isError=false;
                return isError;
            }else for(var i=0;i<oZname.value.length;i++){
                if ((oZname.value.charCodeAt(i)<48)||(oZname.value.charCodeAt(i)>57)&&(oZname.value.charCodeAt(i)<97) ||(oZname.value.charCodeAt(i)>122)){
                    oError.innerHTML="用户名只能是字母和数字";
                    isNotError=false;
                    return isError;
                }
            }
            if ((oZpass1.value.length < 6) || (oZpass1.value.length > 12)) {
                oError.innerHTML = "密码要6-12位";
                isError=false;
                return isError;

            }else if (oZpass1.value!= oZpass2.value) {
                oError.innerHTML = "两次密码不一致";
                isError=false;
                return isError;
            }
            return isError;
    window.alert("注册成功!")
        }

 

 

3.2登录

   

function fnLogin() {
            var oUname=document.getElementById("uname");
            var oUpass=document.getElementById("upass");
            var oError=document.getElementById("error_box");
            var isError=true;
            oError.innerHTML="<br>"

            
//uname
           
if ((oUname.value.length < 6) || (oUname.value.length > 20)) {
                oError.innerHTML = "用户名要6-20位";
                isError=false;
                return isError;
            }else if ((oUname.value.charCodeAt(0)>=48)&&(oUname.value.charCodeAt(0)<=57)){
                oError.innerHTML="首字母必须是字母";
                isError=false;
                return isError;
            }else {
                for(var i=0;i<oUname.value.length;i++){
                    if ((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(i)>57)&&(oUname.value.charCodeAt(i)<97) ||(oUname.value.charCodeAt(i)>122)){
                        oError.innerHTML="用户名只能是字母和数字";
                        isNotError=false;
                        return isError;
                    }
                }
            }
            //upass
           
if ((oUpass.value.length < 6 )|| (oUpass.value.length > 20)) {
                oError.innerHTML = "密码要6-20位";
                isError=false;
                return isError;
            }
            return isError;
    window.alert("登录成功!")
        }

 

 

 

 

 

3.3其他

function mySwitch() {
    var oBody = document.getElementById("myBody");
    var oOnOff = document.getElementById("myOnOff");
    if (oOnOff.src.match("bulbon")) {
        oOnOff.src = "http://www.runoob.com/images/pic_bulboff.gif";
        oBody.style.background = "black";
        oBody.style.color = "white";
    } else {
        oOnOff.src = "http://www.runoob.com/images/pic_bulbon.gif";
        oBody.style.background = "white";
        oBody.style.color = "black";

    }
}

 

 

 

四.系统实现的关键算法和数据结构

关键算法是if根据前端传到的数据在后台进行比对,再根据传输的code的值进行判断,再根据js文件的判断,在页面上展示出不同的效果。

其中其code值是如何传输的?这就需要调用其中resful文件中,不同类的定义了。

 

import os
DEBUG=True
SECRET_KEY=os.urandom(24)



SQLALCHEMY_DATABASE_URI = \'mysql+pymysql://root:@127.0.0.1:3306/mytest1?charset=utf8\'
SQLALCHEMY_TRACK_MODIFICATIONS = False

 

 

from flask import Flask, render_template, request, redirect, url_for, session,g
from flask_sqlalchemy import SQLAlchemy
import config,os
from functools import wraps
from datetime import datetime
from sqlalchemy import or_,and_

from werkzeug.security import generate_password_hash,check_password_hash


app=Flask(__name__)
app.config.from_object(config)
db=SQLAlchemy(app)

# 创建用户模型
class User(db.Model):
    __tablename__ = \'user\'
   
id = db.Column(db.Integer,primary_key=True,autoincrement=True)
    username = db.Column(db.String(20),nullable=False)
    _password = db.Column(db.String(200),nullable=False)#内部使用
   
img= db.Column(db.String(200))
    nickname=db.Column(db.String(50))

    @property
    def password(self): # 外部使用
       
return self._password

    @password.setter
    def password(self,row_password):
        self._password = generate_password_hash(row_password)

    def check_password(self,row_password):
        result = check_password_hash(self._password,row_password)
        return result

#创建发布问答模型
class Question(db.Model):
    __tablename__ =\'questions\'
   
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    title=db.Column(db.String(100),nullable=False)
    detail=db.Column(db.Text,nullable=False)
    create_time=db.Column(db.DateTime,default=datetime.now)
    fenlei_id = db.Column(db.Integer,db.ForeignKey(\'fenlei.id\'))
    author_id=db.Column(db.Integer,db.ForeignKey(\'user.id\'))#外键约束,数据类型db.Integer第二个参数指定外键是user表的id
   
author=db.relationship(\'User\',backref=db.backref(\'questions\'))
    fenlei=db.relationship(\'Fenlei\',backref=db.backref(\'questions\'))
# 创建评论模型
class Comment(db.Model):
    __tablename__ = \'comments\'
   
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    author_id = db.Column(db.Integer, db.ForeignKey(\'user.id\'))
    questions_id = db.Column(db.Integer, db.ForeignKey(\'questions.id\'))
    create_time=db.Column(db.DateTime, default=datetime.now)
    detail=db.Column(db.Text,nullable=False)
    questions=db.relationship(\'Question\',backref=db.backref(\'comments\',order_by=create_time.desc))
    author=db.relationship(\'User\',backref=db.backref(\'comments\'))

class Fenlei(db.Model):
    __tablename__=\'fenlei\'
   
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    name = db.Column(db.String(100))

class Dianzan(db.Model):
    __tablename__ = \'dianzan\'
   
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    user_id = db.Column(db.Integer, db.ForeignKey(\'user.id\'))  # 外键约束,数据类型db.Integer第二个参数指定外键是user表的id
   
questions_id = db.Column(db.Integer, db.ForeignKey(\'questions.id\'))
    user = db.relationship(\'User\', backref=db.backref(\'dianzan\'))
    question = db.relationship(\'Question\', backref=db.backref(\'dianzan\'))

class Collection(db.Model):
    __tablename__ = \'collection\'
   
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    user_id = db.Column(db.Integer, db.ForeignKey(\'user.id\'))  # 外键约束,数据类型db.Integer第二个参数指定外键是user表的id
   
questions_id = db.Column(db.Integer, db.ForeignKey(\'questions.id\'))
    create_time = db.Column(db.DateTime, default=datetime.now)
    user = db.relationship(\'User\', backref=db.backref(\'collection\'))
    question = db.relationship(\'Question\', backref=db.backref(\'collection\'))

db.create_all()

@app.route(\'/\')
def index():
    fenleiid= request.args.get(\'bd\',type=int,default=None)
    if fenleiid:
        questions = Question.query.filter_by(fenlei_id=fenleiid)
    else:
        questions= Question.query.order_by(\'-create_time\').all()
    context={
        "questions":questions,
        "fenlei":Fenlei.query.all()
    }
    return render_template(\'base.html\',**context)

#登录
@app.route(\'/login/\',methods={\'GET\',\'POST\'})
def login():
    if request.method==\'GET\':
        return render_template(\'login.html\')
    else:
        username = request.form.get(\'username\'# 获取form中的数据
       
password = request.form.get(\'password\')
        nickname = request.form.get(\'nickname\')
        user = User.query.filter(User.username == username).first()
        # id = User.query.filter(User.id == id).first()
       
if user:
            if user.check_password(password):
                session[\'user\'] = username
                session[\'id\'] = user.id
                session.permanent=True
                return
redirect(url_for(\'index\'))  # 返回到首页
           
else:
                return u\'password error\'
       
else:
            return u\'error username or password\' #输出错误

#修改密码
@app.route(\'/updata_password/<user_id>\',methods={\'GET\',\'POST\'})
def updata_password(user_id):
    if request.method==\'GET\':
        return render_template(\'updata_password.html\')
    else:
        oldpwd = request.form.get(\'oldpwd\')
        newpwd = request.form.get(\'newpwd\')
        newpwd1= request.form.get(\'newpwd1\')
        user= User.query.filter(User.id==user_id).first()
        if user.check_password(oldpwd):
            if newpwd !=newpwd1:
                return \'密码输入不一致\'
           
else:
                user.password=newpwd
                db.session.commit()
                return render_template(\'login.html\')
        else:
            return \'原密码错误\'





#注册
@app.route(\'/enroll/\',methods={\'GET\',\'POST\'})
def enroll():
    if request.method==\'GET\':
        return render_template(\'enroll.html\')
    else:
        username=request.form.get(\'username\')# 获取form中的数据
       
password=request.form.get(\'password\')
        nickname=request.form.get(\'nickname\')
        user = User.query.filter(User.username == username).first()
        if user:
            return u\'username existed\'
       
else:
            user = User(username=username, password=password, nickname=nickname)
            db.session.add(user)#数据库操作
           
db.session.commit()
            return redirect(url_for(\'login\'))# 重定向到登录页

#注销
@app.route(\'/logout/\')
def logout():
    session.clear()
    return redirect(url_for(\'index\'))# 清除所有数据返回到首页


# 上下文处理器
@app.context_processor
def mycontext():
    usern=session.get(\'user\')
    userid = session.get(\'userid\')
    # id=session.get(\'id\')
   
if usern:
        user = User.query.filter(User.username==usern).first()

        return {\'username\':usern,\'user\':user,
                  \'userid\':user.id
                }
    else:
&nbs

以上是关于python设计网站的主要内容,如果未能解决你的问题,请参考以下文章

Python 自动化 - 浏览器chrome打开F12开发者工具自动Paused in debugger调试导致无法查看网站资源问题原因及解决方法,javascript反调试问题处理实例演示(代码片段

iphone / Objective c的最佳代码片段网站是啥[重复]

vs2003:快速片段工具

超级有用的9个PHP代码片段

常用python日期日志获取内容循环的代码片段

html 将以编程方式附加外部脚本文件的javascript代码片段,并按顺序排列。用于响应式网站,其中ma