利用Flask搭建微电影视频网站(三):前端首页搭建

关于博主

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

                                      微信公众号:  啃饼思录
                                    QQ: 2810706745(啃饼小白)

写在前面

本篇笔记,我们来学习Flask网站前端首页面的搭建,这其实和Django搭建网页很类似,大家好好体会一下。

本篇笔记对应上传的仓库为:https://github.com/licheetools/movie对应第三篇。

前台布局搭建

第一步将所有static文件都放进指定的位置:

然后在templates/home文件夹下面新建一个home.html文件,将tpl/2-movie/nav.html文件内容全部拷贝到我们刚才新建的home.html页面里面,然后修改我们静态文件的目录,可以按照下面的图片要求进行:

1、静态文件的引入

{{ url_for('static',filename='文件路径')}}

2、定义路由

{{ url_for('模块名.视图名',变量=参数)}}

3、定义数据块

{%block 数据块名称%} .....{% endblock %}
# 原来代码为 <link rel="stylesheet" href="../static/base/css/bootstrap.min.css">
# 现在代码为   <link rel="stylesheet" href="{{ url_for('static', filename='base/css/bootstrap.min.css') }}">

其余所有的js, jpg,css均按照这样的要求进行,这里就不再一一提示了,直接附上代码:

    <link rel="shortcut icon" href="{{ url_for('static', filename='base/images/logo.png') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='base/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='base/css/bootstrap-movie.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='base/css/animate.css') }}">

<img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;">&nbsp;微电影

<script src="{{ url_for('static', filename='base/js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='base/js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='base/js/jquery.singlePageNav.min.js') }}"></script>
<script src="{{ url_for('static', filename='base/js/wow.min.js') }}"></script>
<script src="{{ url_for('static', filename='lazyload/jquery.lazyload.min.js') }}"></script>

接着在图示位置进行挖坑填坑操作:

<div class="container" style="margin-top:76px">
    {% block content %}{% endblock %}
</div>

然后打开home模块的视图处理器(home/views.py):

from . import home
from flask import render_template


@home.route('/')
def index():
    return render_template("home/index.html")i

你发现没有此刻我们在templates/home文件夹下面是没有index.html文件的,我们需要去创建一个index.html文件,在里面输入如下代码:

{% extends "home.html" %}

{% block %}
<h1>helloworld</h1>
{% endblock %}
然后运行一下我们的manage.py文件,在浏览器地址栏中输入http://127.0.0.1:5000/ 出现了错误:

错误提示我们block缺少一个名字,那我们就修改一下index.html文件:

{% extends "home.html" %}

{% block content %}
    <h1>Helo,World!</h1>
{% endblock %}
然后再次刷新一下我们的页面,发现还是出了问题:

错误提示我们没有找到home.html页面,那是因为我们的路径出了问题,我们继续修改一下:

{% extends "home/home.html" %}

{% block content %}
    <h1>Helo,World!</h1>
{% endblock %}
接着我们再次刷新一下,页面正常显示了:

会员登录页面搭建

打开app/home/views.py文件,新建以下代码:

from flask import  redirect, url_for

# 登入
@home.route('/login/')
def login():
    return render_template("home/login.html")


# 登出
@home.route('/logout/')
def logout():
    return redirect(url_for('home.login'))

然后在templates/home下面新建login.html文件,往里面新增如下代码:

{% extends 'home/home.html' %}
{% block content %}
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-log-in"></span>&nbsp;会员登录</h3>
                </div>
                <div class="panel-body">
                    <form role="form">
                        <fieldset>
                            <div class="form-group">
                                <label for="input_contact"><span class="glyphicon glyphicon-user"></span>&nbsp;账号</label>
                                <input id="input_contact" class="form-control input-lg" placeholder="用户名/邮箱/手机号码" name="contact" type="text" autofocus>
                            </div>
                            <div class="col-md-12" id="error_contact"></div>
                            <div class="form-group">
                                <label for="input_password"><span class="glyphicon glyphicon-lock"></span>&nbsp;密码</label>
                                <input id="input_password" class="form-control input-lg" placeholder="密码" name="password" type="password" value="">
                            </div>
                            <div class="col-md-12" id="error_password"></div>
                            <a href="user.html" class="btn btn-lg btn-success btn-block">登录</a>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

(这段代码来自tpl/2-movie/login.html里面<div class="container" style="margin-top:120px"> 内容</div>的内容部分)

然后打开home/home.html文件,修改我们的url跳转链接:

会员注册

打开app/home/views.py文件,新建以下代码:

# 会员注册
@home.route('/register/')
def register():
    return render_template("home/register.html")

然后在templates/home下面新建register.html文件,往里面新增如下代码:

{% extends 'home/home.html' %}
{% block content %}
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-plus"></span>&nbsp;会员注册</h3>
                </div>
                <div class="panel-body">
                    <form role="form">
                        <fieldset>
                            <div class="form-group">
                                <label for="input_name"><span class="glyphicon glyphicon-user"></span>&nbsp;昵称</label>
                                <input id="input_name" class="form-control input-lg" placeholder="昵称" name="name" type="text" autofocus>
                            </div>
                            <div class="col-md-12" id="error_name"></div>
                            <div class="form-group">
                                <label for="input_email"><span class="glyphicon glyphicon-envelope"></span>&nbsp;邮箱</label>
                                <input id="input_email" class="form-control input-lg" placeholder="邮箱" name="email" type="email" autofocus>
                            </div>
                            <div class="col-md-12" id="error_email"></div>
                            <div class="form-group">
                                <label for="input_phone"><span class="glyphicon glyphicon-phone"></span>&nbsp;手机</label>
                                <input id="input_phone" class="form-control input-lg" placeholder="手机" name="phone" type="text" autofocus>
                            </div>
                            <div class="col-md-12" id="error_phone"></div>
                            <div class="form-group">
                                <label for="input_password"><span class="glyphicon glyphicon-lock"></span>&nbsp;密码</label>
                                <input id="input_password" class="form-control input-lg" placeholder="密码" name="password" type="password" value="">
                            </div>
                            <div class="col-md-12" id="error_password"></div>
                            <div class="form-group">
                                <label for="input_repassword"><span class="glyphicon glyphicon-lock"></span>&nbsp;确认密码</label>
                                <input id="input_repassword" class="form-control input-lg" placeholder="确认密码" name="repassword" type="password" value="">
                            </div>
                            <div class="col-md-12" id="error_repassword"></div>
                            <a href="user.html" class="btn btn-lg btn-success btn-block">注册</a>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

(这段代码来自tpl/2-movie/register.html里面<div class="container" style="margin-top:120px"> 内容</div>的内容部分)

然后打开home/home.html文件,修改我们的url跳转链接:

会员中心页面搭建

由于前面已经有过2个页面搭建的例子,所以这里我们先定义完所以的路由,再在home文件夹里面新建对应的html文件!打开app/home/views.py文件,新建以下代码:

# 会员中心
@home.route('/user/')
def user():
    return render_template("home/user.html")


# 修改密码
@home.route('/pwd/')
def pwd():
    return render_template("home/pwd.html")


# 评论记录
@home.route('/comments/')
def comments():
    return render_template("home/comments.html")


# 登入日志
@home.route('/loginlog/')
def loginlog():
    return render_template("home/loginlog.html")


# 收藏电影
@home.route('/moviecol/')
def moviecol():
    return render_template("home/moviecol.html")
就是这个样子:

接下来定义会员中心菜单栏页面,在home文件夹里面,新建menu.html文件,里面写入从tpl/2-movie/user.html页面中<div class="col-md-3"> </div>的部分,并且修改一下url的跳转问题:

<div class="col-md-3">
    <div class="list-group">
        <a href="{{ url_for('home.user') }}" class="list-group-item active">
            <span class="glyphicon glyphicon-user"></span>&nbsp;会员中心
        </a>
        <a href="{{ url_for('home.pwd') }}" class="list-group-item">
            <span class="glyphicon glyphicon-lock"></span>&nbsp;修改密码
        </a>
        <a href="{{ url_for('home.comments') }}" class="list-group-item">
            <span class="glyphicon glyphicon-comment"></span>&nbsp;评论记录
        </a>
        <a href="{{ url_for('home.loginlog') }}" class="list-group-item">
            <span class="glyphicon glyphicon-calendar"></span>&nbsp;登录日志
        </a>
        <a href="{{ url_for('home.moviecol') }}" class="list-group-item">
            <span class="glyphicon glyphicon-heart"></span>&nbsp;收藏电影
        </a>
    </div>
</div>

user.html书写

现在开始书写我们的user.html文件,我们复制tpl/2-movie/user.html页面中<div class="col-md-9"> </div>的部分:

{% extends "home/home.html" %}

{% block content %}
    <div class="col-md-9">
     ......
    </div>
{% endblock %}
然后运行一下我们的manage.py文件,发现我们的个人中心页面出来了,但是菜单栏没有出现:

我们需要include我们之前定义的menu.html页面,修改我们的user.html文件:

{% extends "home/home.html" %}

{% block content %}
{% include "home/menu.html" %}
    <div class="col-md-9">
     ......
    </div>
{% endblock %}
再刷新一下我们的页面试试,发现菜单栏已经可以正常显示了:

接下来将home/home.html里面的style进行合并,再进行挖坑填坑操作:

 <style>
        .navbar-brand > img {
            display: inline;
        }

        .media {
            padding: 3px;
            border: 1px solid #ccc
        }
    </style>
    {% block css %}{% endblock %}

接着打开home/user.html页面,对原来页面的css样式进行挖坑填坑操作:

{% block css %}
    <style>
        .navbar-brand > img {
            display: inline;
        }

        .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
            padding-right: 3px;
            padding-left: 3px;
        }

        .media {
            padding: 3px;
            border: 1px solid #ccc
        }
    </style>
{% endblock %}

pwd.html的书写

现在开始书写我们的pwd.html文件,我们复制tpl/2-movie/pwd.html页面中<div class="col-md-9"> </div>的部分:

{% extends "home/home.html" %}

{% block css %}
    <style>
        .navbar-brand>img {
            display: inline;
        }
        .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
            padding-right: 3px;
            padding-left: 3px;
        }
        .media{
            padding:3px;
            border:1px solid #ccc
        }
    </style>
{% endblock %}

{% block content %}
{% include "home/menu.html" %}
    <div class="col-md-9">
     ......
    </div>
{% endblock %}

我们发现我们还没有判断选中状态,我们给menu.html的类加上一个ID,然后采用jQuery来进行判断:

<div class="col-md-3">
    <div class="list-group">
        <a id ="m-1" href="{{ url_for('home.user') }}" class="list-group-item">
            <span class="glyphicon glyphicon-user"></span>&nbsp;会员中心
        </a>
        <a id ="m-2" href="{{ url_for('home.pwd') }}" class="list-group-item">
            <span class="glyphicon glyphicon-lock"></span>&nbsp;修改密码
        </a>
        <a id ="m-3" href="{{ url_for('home.comments') }}" class="list-group-item">
            <span class="glyphicon glyphicon-comment"></span>&nbsp;评论记录
        </a>
        <a id ="m-4" href="{{ url_for('home.loginlog') }}" class="list-group-item">
            <span class="glyphicon glyphicon-calendar"></span>&nbsp;登录日志
        </a>
        <a id ="m-5" href="{{ url_for('home.moviecol') }}" class="list-group-item">
            <span class="glyphicon glyphicon-heart"></span>&nbsp;收藏电影
        </a>
    </div>
</div>

打开home.html页面,在底部新增js的挖坑填坑代码:

{% block js %} {% endblock %}

然后打开user.html页面,在底部新增如下代码:

{% block js %}
    <script>
        $(document).ready(function () {
            $("#m-1").addClass("active");
            });
    </script>
{% endblock %}

我们顺便在pwd.html页面也加上类似的代码:

{% block js %}
    <script>
        $(document).ready(function () {
            $("#m-2").addClass("active");
            });
    </script>
{% endblock %}

comments.html的书写

{% extends "home/home.html" %}


{% block css %}
    <style>
        .navbar-brand > img {
            display: inline;
        }

        .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
            padding-right: 3px;
            padding-left: 3px;
        }

        .media {
            padding: 3px;
            border: 1px solid #ccc
        }
    </style>
{% endblock %}

{% block content %}
    {% include "home/menu.html" %}

    <div class="col-md-9">
    </div>
{% endblock %}
{% block js %}
    <script>
        $(document).ready(function () {
            $("#m-3").addClass("active");
        });
    </script>
{% endblock %}

loginlog.html的书写

{% extends "home/home.html" %}


{% block css %}
    <style>
        .navbar-brand > img {
            display: inline;
        }

        .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
            padding-right: 3px;
            padding-left: 3px;
        }

        .media {
            padding: 3px;
            border: 1px solid #ccc
        }
    </style>
{% endblock %}

{% block content %}
    {% include "home/menu.html" %}

    <div class="col-md-9">
    </div>
{% endblock %}
{% block js %}
    <script>
        $(document).ready(function () {
            $("#m-4").addClass("active");
        });
    </script>
{% endblock %}

moviecol.html的书写

{% extends "home/home.html" %}


{% block css %}
    <style>
        .navbar-brand > img {
            display: inline;
        }

        .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
            padding-right: 3px;
            padding-left: 3px;
        }

        .media {
            padding: 3px;
            border: 1px solid #ccc
        }
    </style>
{% endblock %}

{% block content %}
    {% include "home/menu.html" %}

    <div class="col-md-9">
    </div>
{% endblock %}
{% block js %}
    <script>
        $(document).ready(function () {
            $("#m-5").addClass("active");
        });
    </script>
{% endblock %}

现在再来运行我们的manage.py文件,我们在浏览器地址栏里面输入http://127.0.0.1:5000/user/,然后回车,然后点击左侧的菜单栏,发现页面显示没有问题。最后来完善一下url的跳转,我们打开home/home.html页面,修改如下:![](https://upload-images.jianshu.io/upload_images/8964398-26906216cdd4d18c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

电影列表页面搭建

继续在我们的home/views.py文件里面新增以下代码:

# 首页
@home.route('/')
def index():
    return render_template("home/index.html")


# 动画
@home.route('/animation/')
def animation():
    return render_template("home/animation.html")

注意:因为在前面我们已经创建了一个index函数,所以我们需要把它们去掉,或者重写一个

做完这些自然就是在templates/home文件夹下面新建对应的index.html和animation.html页面。考虑到首页的独立性,我们也在templates/home文件夹下面新建一个layout.html页面,并同时将home/home.html文件里面的代码都拷贝进去,并且修改一下home/home.html,将内容部分进行挖坑填坑操作:
现在回到我们的templates/home/index.html页面,其block content部分来自我们的tpl/2-movie/index.html的热门电影和电影列表部分:
紧接着将我们templates/home/index.html页面的电影列表展开和收起,就是这个样子:

我们只留下前四个col-md-3,其余的col-md-3就都删除!

然后将tpl/1-index-animation/animation.html的代码复制到home/animation.html里面,接着在static文件下新建anim文件,把与animation有关的js,css,main-banner都复制进去,就是这个样子:

然后我们回到templates/animation.html页面,修改我们的静态样式加载地址:

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='anmi/css/style.css') }}">

<img src="{{ url_for('static', filename='anmi/main_banner/big0020150102211033.jpg') }}" alt="">


<script type="text/javascript" src="{{ url_for('static', filename='anmi/js/jquery.js') }}"></script>

接着回到我们的home/index.html页面,我们进行animation的跳转链接配置:

<iframe class="wow fadeIn" width="100%" height="375px" frameborder=0 scrolling=no src="{{ url_for('home.animation') }}"></iframe>
还有对我们的列表进行for循环的读取:
最后运行一下我们的manage.py文件,发现样式和页面都正常显示了:

电影搜索页面搭建

老规矩,在home/views.py文件下面新增以下代码:

# 搜索页面
@home.route('/search/')
def search():
    return render_template("home/search.html")

自然你就需要在templates/home文件夹下面新建一个search.html页面。

打开home/search.html页面,我们新建以下代码:
然后展开和收起页面,利用for循环进行填充:

接下来就是search相关的url跳转的配置,home.html和layout.html页面都需要配置:

 <a class="btn btn-default" href="{{ url_for('home.search') }}"><span class="glyphicon glyphicon-search"></span>&nbsp;搜索</a>

<a class="btn btn-default" href="{{ url_for('home.search') }}"><span class="glyphicon glyphicon-search"></span>&nbsp;搜索</a>

电影详情页面搭建

老规矩,在home/views.py文件下面新增以下代码:

# 详情页面
@home.route('/play/')
def play():
    return render_template("home/play.html")

自然你就需要在templates/home文件夹下面新建一个play.html页面。

打开home/play.html页面,我们新建以下代码:

然后对所以的静态文件进行访问配置,由于太多,这里就不一一说明了。

接下来对home/home.html页面所以的url进行跳转配置,还有搜索中的电影播放与收藏中的电影播放页面的跳转,这个很多,需要耐心一个个去查找,修改。

还有收藏页面的for循环:

之后运行一下manage.py文件,发现页面跳转没有问题。

404页面的搭建

因为404页面是一个全局页面,所以我们需要在初始化文件里面写入,而不是在home这个应用里面(app/--init--.py文件):

from flask import Flask, render_template

app = Flask(__name__)
app.debug = True

from app.home import home as home_blueprint
from app.admin import admin as admin_blueprint

app.register_blueprint(home_blueprint)
app.register_blueprint(admin_blueprint, url_prefix="/admin")


# 404页面
@app.errorhandler(404)
def page_not_found(error):
    return render_template("home/404.html"), 404

自然你就需要在templates/home文件夹下面新建一个404.html页面。

然后把4-404.html页面的代码都拷贝进去,并修改页面的跳转和静态文件的加载样式:

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>消失在宇宙星空中的404页面</title>
    <link href="{{ url_for('static', filename='404/404.css') }}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 代码 开始 -->
<div class="fullScreen" id="fullScreen">
    <img class="rotating" src="{{ url_for('static', filename='404/spaceman.svg') }}">
    <div class="pagenotfound-text">
        <h1>迷失在太空中!</h1>
        <h2><a href="{{ url_for('home.index') }}">返回首页</a></h2>
    </div>
    <canvas id="canvas2d"></canvas>
</div>
<script type="text/javascript" src="{{ url_for('static', filename='404/spaceman.svg') }}"></script>
<!-- 代码 结束 -->
</body>
</html>

然后刷新一下我们的页面,发现404页面可以正常显示出来。

至此,我们本篇关于前端首页搭建的介绍就到此为止了,感谢你的赏阅!

本篇笔记对应上传的仓库为:https://github.com/licheetools/movie对应第三篇。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云计算教程系列

如何在Windows 10上安装Ruby并设置本地编程环境

Ruby是一种动态编程语言,可用于编写从简单脚本到游戏和Web应用程序的任何内容。它于1993年首次在日本发布,但在2005年作为服务器端Web开发的语言获得了...

3100
来自专栏大数据钻研

HTML meta标签总结与属性使用介绍

之前学习前端中,对meta标签的了解仅仅只是这一句。 <metacharset="UTF-8"> 但是打开任意的网站,其head标签内都有一列的meta标签。比...

3296
来自专栏dotnet & java

WCF入门学习(4)

上一篇的学习中碰到一个问题,用地址http://localhost:8080/mex 访问元数据的时候一直提示400 bad request 错误,因为时间太晚...

994
来自专栏PHP在线

[技巧]丰富的phpstorm编辑器配色方法

1 打开编辑器 phpstorm菜单找到preferences,MAC快捷键[command+,],Editor->Colors&font->font 在此处设...

3765
来自专栏老马寒门IT

Node入门教程(7)第五章:node 模块化(下) npm与yarn详解

Node的包管理器 JavaScript缺少包结构的定义,而CommonJS定义了一系列的规范。而NPM的出现则是为了在CommonJS规范的基础上,实现解决包...

3636
来自专栏西枫里博客

宝塔面板操作多个域名做301跳转

都知道在网站更换域名的过程中为了保住收录和排名,就需要通过搜索引擎提供的改版工具来进行操作。而其中最重要的就是对老域名进行301永久重定向获得搜索引擎的收录更新...

4051
来自专栏老马寒门IT

05-移动端开发教程-CSS3兼容处理

CSS3的标准并没有全部定稿,目前CSS3的标准分成了不同的模块,具体的标准由各个模块推动标准和定稿,标准制定的过程中,浏览器也在不断的发新的版本来兼容新的标准...

37412
来自专栏Flutter入门到实战

Flutter从配置安装到填坑指南详解

在 Google I/O ’17 上,Google 向我们介绍了 Flutter —— 一款新的用于创建移动应用的开源库。

2.2K5
来自专栏码农笔录

手动下载genymotion ova镜像文件,genymotion下载失败、慢解决方案

2084
来自专栏王小雷

Ubuntu16.04安装后开发环境配置和常用软件安装

Ubuntu16.04安装后1.安装常用软件搜狗输入法+编辑器Atom+浏览器Chome+视频播放器vlc+图像编辑器GIMP Image Editor安装+视...

3805

扫码关注云+社区

领取腾讯云代金券