忘尘丶莫负

【15】大事件项目：附-大事件项目源码、大事件项目效果

文章目录

大事件项目源码
- article
- - `art_cate.html`
  - `art_list.html`
  - `art_pub.html`
- assets
- - css
  - - article
    - - `art_cate.css`
      - `art_list.css`
      - `art_pub.css`
    - user
    - - `user_avatar.css`
        
        `user_info.css`
        
        `user_pwd.css`
    - `index.css`
    - `login.css`
  - images
  - - `login_bg.jpg`
  - `login_title.png`
  - `logo.png`
  - `sample.jpg`
  - `sample2.jpg`
  - js
  - - article
    - - `art_cate.js`
      - `art_list.js`
      - `art_pub.js`
    - user
    - - `user_avatar.js`
      - `user_info.js`
      - `user_pwd.js`
    - `baseAPI.js`
    - `index.js`
    - `login.js`
- home
- - `dashboard.html`
- user
- - `user_avatar.html`
  - `user_info.html`
  - `user_pwd.html`
- `index.html`
- `login.html`
大事件项目效果

大事件项目源码

article

`art_cate.html`


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <link rel="stylesheet" href="/assets/lib/layui/css/layui.css">
    
    <link rel="stylesheet" href="/assets/css/article/art_cate.css">
head>

<body>
    
    <div class="layui-card">
        <div class="layui-card-header">
            <span>文章类别管理span>
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="btnAddCate">添加类别button>
        div>
        <div class="layui-card-body">
            <table class="layui-table">
                <colgroup>
                    <col />
                    <col />
                    <col width="200" />
                colgroup>
                <thead>
                    <tr>
                        <th>分类名称th>
                        <th>分类别名th>
                        <th>操作th>
                    tr>
                thead>
                <tbody>tbody>
            table>
        div>
    div>

    
    <script type="text/html" id="tpl-table">
        {
      {
      each data}}
        <tr>
            <td>{
      {
      $value.name}}</td>
            <td>{
      {
      $value.alias}}</td>
            <td>
                <button type="button" class="layui-btn layui-btn-xs btn-edit" data-id="{
      {$value.Id}}">编辑</button>
                <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id="{
      {$value.Id}}">删除</button>
            </td>
        </tr>
        {
      {
      /each}}
    script>

    
    <script type="text/html" id="dialog-add">
        <form class="layui-form" id="form-add">
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                    <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    script>

        
        <script type="text/html" id="dialog-edit">
            <form class="layui-form" id="form-edit" lay-filter="form-edit">
                <input type="hidden" name="Id">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类别名</label>
                    <div class="layui-input-block">
                        <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                    </div>
                </div>
            </form>
        script>

    
    <script src="/assets/lib/layui/layui.all.js">script>
    
    <script src="/assets/lib/jquery.js">script>
    
    <script src="/assets/js/baseAPI.js">script>
    
    <script src="/assets/lib/template-web.js">script>
    
    <script src="/assets/js/article/art_cate.js">script>
body>

html>

`art_list.html`


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <link rel="stylesheet" href="/assets/lib/layui/css/layui.css">
    
    <link rel="stylesheet" href="/assets/css/article/art_list.css">
head>

<body>
    
    <div class="layui-card">
        <div class="layui-card-header">文章列表div>
        <div class="layui-card-body">
            
            <form class="layui-form" id="form-search">
                <div class="layui-form-item layui-inline">
                    <select name="cate_id">select>
                div>
                <div class="layui-form-item layui-inline">
                    <select name="state">
                        <option value="">所有状态option>
                        <option value="已发布">已发布option>
                        <option value="草稿">草稿option>
                    select>
                div>
                <div class="layui-form-item layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">筛选button>
                div>
            form>
            
            <table class="layui-table">
                <colgroup>
                    <col />
                    <col width="150" />
                    <col width="180" />
                    <col width="150" />
                    <col width="150" />
                colgroup>
                <thead>
                    <tr>
                        <th>文章标题th>
                        <th>分类th>
                        <th>发表时间th>
                        <th>状态th>
                        <th>操作th>
                    tr>
                thead>
                <tbody>tbody>
            table>
            
            <div id="pageBox">div>
        div>
    div>

    
    <script type="text/html" id="tpl-table">
        {
      {
      each data}}
        <tr>
            <td>{
      {
      $value.title}}</td>
            <td>{
      {
      $value.cate_name}}</td>
            <td>{
      {
      $value.pub_date|dataFormat}}</td>
            <td>{
      {
      $value.state}}</td>
            <td>
                <button type="button" class="layui-btn layui-btn-xs">编辑</button>
                <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete"
                    data-id="{
      {$value.Id}}">删除</button>
            </td>
        </tr>
        {
      {
      /each}}
    script>

    
    <script type="text/html" id="tpl-cate">
        <option value="">所有分类</option>
        {
      {
      each data}}
        <option value="{
      {$value.Id}}">{
      {
      $value.name}}</option>
        {
      {
      /each}}
    script>

    
    <script src="/assets/lib/layui/layui.all.js">script>
    
    <script src="/assets/lib/jquery.js">script>
    
    <script src="/assets/js/baseAPI.js">script>
    
    <script src="/assets/lib/template-web.js">script>
    
    <script src="/assets/js/article/art_list.js">script>

body>

html>

`art_pub.html`


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <link rel="stylesheet" href="/assets/lib/layui/css/layui.css">
    
    <link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />
    
    <link rel="stylesheet" href="/assets/css/article/art_pub.css">

head>

<body>
    
    <div class="layui-card">
        <div class="layui-card-header">写文章div>
        <div class="layui-card-body">
            
            <form class="layui-form" id="form-pub">
                
                <div class="layui-form-item">
                    <label class="layui-form-label">文章标题label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                            autocomplete="off" class="layui-input" />
                    div>
                div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">文章类别label>
                    <div class="layui-input-block">
                        <select name="cate_id" lay-verify="required">select>
                    div>
                div>
                
                <div class="layui-form-item">
                    
                    <label class="layui-form-label">文章内容label>
                    
                    <div class="layui-input-block" style="height: 400px;">
                        
                        <textarea name="content">textarea>
                    div>
                div>
                
                <div class="layui-form-item">
                    
                    <label class="layui-form-label">文章封面label>
                    
                    <div class="layui-input-block cover-box">
                        
                        <div class="cover-left">
                            <img id="image" src="/assets/images/sample2.jpg" alt="" />
                        div>
                        
                        <div class="cover-right">
                            
                            <div class="img-preview">div>
                            
                            <button type="button" class="layui-btn layui-btn-danger" id="btnChooseImage">选择封面button>
                            
                            <input type="file" id="coverFile" style="display: none;"
                                accept="image/png,image/jpeg,image/gif" />
                        div>
                    div>
                div>
                
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit>发布button>
                        <button class="layui-btn layui-btn-primary" lay-submit id="btnSave2">存为草稿button>
                    div>
                div>
            form>
        div>
    div>

    <script type="text/html" id="tpl-cate">
        <option value="">请选择文章类别</option>
        {
      {
      each data}}
        <option value="{
      {$value.Id}}">{
      {
      $value.name}}</option>
        {
      {
      /each}}
    script>

    
    <script src="/assets/lib/layui/layui.all.js">script>
    
    <script src="/assets/lib/jquery.js">script>
    
    <script src="/assets/js/baseAPI.js">script>
    
    <script src="/assets/lib/template-web.js">script>
    
    <script src="/assets/lib/tinymce/tinymce.min.js">script>
    <script src="/assets/lib/tinymce/tinymce_setup.js">script>
    
    <script src="/assets/lib/cropper/Cropper.js">script>
    <script src="/assets/lib/cropper/jquery-cropper.js">script>
    
    <script src="/assets/js/article/art_pub.js">script>

body>

html>

assets

css

article

`art_cate.css`

html,
body {
     
    margin: 0;
    padding: 0;
}

body {
     
    padding: 15px;
    background-color: #f2f3f5;
}

.layui-card-header {
     
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#form-add,
#form-edit {
     
    padding-top: 20px;
    padding-right: 30px;
}

`art_list.css`

html,
body {
     
    margin: 0;
    padding: 0;
}

body {
     
    padding: 15px;
    background-color: #f2f3f5;
}

`art_pub.css`

html,
body {
     
    margin: 0;
    padding: 0;
}

body {
     
    padding: 15px;
    background-color: #f2f3f5;
}

/* 封面容器的样式 */
.cover-box {
     
    display: flex;
}

/* 左侧裁剪区域的样式 */
.cover-left {
     
    width: 400px;
    height: 280px;
    overflow: hidden;
    margin-right: 20px;
}

/* 右侧盒子的样式 */
.cover-right {
     
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 预览区域的样式 */
.img-preview {
     
    width: 200px;
    height: 140px;
    background-color: #ccc;
    margin-bottom: 20px;
    overflow: hidden;
}

user

`user_avatar.css`

html,
body {
     
    margin: 0;
    padding: 0;
}

body {
     
    padding: 15px;
    background-color: #f2f3f5;
}

/* 设置卡片主体区域的宽度 */
.layui-card-body {
     
    width: 500px;
}

/* 设置按钮行的样式 */
.row2 {
     
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

/* 设置裁剪区域的样式 */
.cropper-box {
     
    width: 350px;
    height: 350px;
    background-color: cyan;
    overflow: hidden;
}

/* 设置第一个预览区域的样式 */
.w100 {
     
    width: 100px;
    height: 100px;
    background-color: gray;
}

/* 设置第二个预览区域的样式 */
.w50 {
     
    width: 50px;
    height: 50px;
    background-color: gray;
    margin-top: 50px;
}

/* 设置预览区域下方文本的样式 */
.size {
     
    font-size: 12px;
    color: gray;
    text-align: center;
}

/* 设置图片行的样式 */
.row1 {
     
    display: flex;
}

/* 设置 preview-box 区域的的样式 */
.preview-box {
     
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
}

/* 设置 img-preview 区域的样式 */
.img-preview {
     
    overflow: hidden;
    border-radius: 50%;
}

#file {
     
    display: none;
}

`user_info.css`

html,
body {
     
    margin: 0;
    padding: 0;
}

body {
     
    background-color: #f2f3f5;
    padding: 15px;
}

.layui-form {
     
    width: 500px;
}

`user_pwd.css`

html,
body {
     
    margin: 0;
    padding: 0;
}

body {
     
    padding: 15px;
    background-color: #f2f3f5;
}

.layui-form {
     
    width: 500px;
}

`index.css`

.layui-footer {
     
    text-align: center;
    font-size: 12px;
}

.iconfont {
     
    margin-right: 8px;
}

.layui-icon {
     
    margin-right: 8px;
    margin-left: 20px;
}

iframe {
     
    width: 100%;
    height: 100%;
}

.layui-body {
     
    overflow: hidden;
}

a {
     
    transition: none !important;
}

.userInfo {
     
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 12px;
    user-select: none;
}

.layui-side-scroll .userInfo {
     
    border-bottom: 1px solid #282b33;
}

.layui-nav-img {
     
    width: 40px;
    height: 40px;
}

.text-avatar {
     
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #009688;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    color: #ffffff;
    position: relative;
    top: 4px;
    margin-right: 10px;
}

`login.css`

html,
body {
     
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: url('/assets/images/login_bg.jpg') no-repeat center;
    background-size: cover;
}

.loginAndRegBox {
     
    width: 400px;
    height: 310px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.title-box {
     
    height: 60px;
    background: url('/assets/images/login_title.png') no-repeat center;
}

.reg-box {
     
    display: none;
}

.layui-form {
     
    padding: 0px 30px;
}

.links {
     
    display: flex;
    justify-content: flex-end;
}

.links a {
     
    font-size: 12px;
}

.layui-form-item {
     
    position: relative;
}

.layui-icon {
     
    position: absolute;
    left: 10px;
    top: 10px;
}

.layui-input {
     
    padding-left: 32px;
}

images

`login_bg.jpg`

`login_title.png`

`logo.png`

`sample.jpg`

`sample2.jpg`

js

article

`art_cate.js`

$(function () {
     
    var layer = layui.layer
    var form = layui.form

    initArtCateList()

    // 获取文章分类的列表
    function initArtCateList() {
     
        $.ajax({
     
            method: 'GET',
            url: '/my/article/cates',
            success: function (res) {
     
                var htmlStr = template('tpl-table', res)
                $('tbody').html(htmlStr)
            }
        })
    }

    // 为添加类别按钮绑定点击事件
    var indexAdd = null
    $('#btnAddCate').on('click', function () {
     
        indexAdd = layer.open({
     
            type: 1,
            area: ['500px', '250px'],
            title: '添加文章分类',
            content: $('#dialog-add').html()
        })
    })

    // 通过代理的形式，为 form-add 表单绑定 submit 事件
    $('body').on('submit', '#form-add', function (e) {
     
        e.preventDefault()
        $.ajax({
     
            method: 'POST',
            url: '/my/article/addcates',
            data: $(this).serialize(),
            success: function (res) {
     
                if (res.status !== 0) {
     
                    return layer.msg('新增分类失败！')
                }
                initArtCateList()
                layer.msg('新增分类成功！')
                // 根据索引，关闭对应的弹出层
                layer.close(indexAdd)
            }
        })
    })

    // 通过代理的形式，为 btn-edit 按钮绑定点击事件
    var indexEdit = null
    $('tbody').on('click', '.btn-edit', function () {
     
        // 弹出一个修改文章分类信息的层
        indexEdit = layer.open({
     
            type: 1,
            area: ['500px', '250px'],
            title: '修改文章分类',
            content: $('#dialog-edit').html()
        })

        var id = $(this).attr('data-id')
        // 发起请求获取对应分类的数据
        $.ajax({
     
            method: 'GET',
            url: '/my/article/cates/' + id,
            success: function (res) {
     
                form.val('form-edit', res.data)
            }
        })
    })

    // 通过代理的形式，为修改分类的表单绑定 submit 事件
    $('body').on('submit', '#form-edit', function (e) {
     
        e.preventDefault()
        $.ajax({
     
            method: 'POST',
            url: '/my/article/updatecate',
            data: $(this).serialize(),
            success: function (res) {
     
                if (res.status !== 0) {
     
                    return layer.msg('更新分类数据失败！')
                }
                layer.msg('更新分类数据成功！')
                layer.close(indexEdit)
                initArtCateList()
            }
        })
    })

    // 通过代理的形式，为删除按钮绑定点击事件
    $('tbody').on('click', '.btn-delete', function () {
     
        var id = $(this).attr('data-id')
        // 提示用户是否要删除
        layer.confirm('确认删除?', {
     
            icon: 3,
            title: '提示'
        }, function (index) {
     
            $.ajax({
     
                method: 'GET',
                url: '/my/article/deletecate/' + id,
                success: function (res) {
     
                    if (res.status !== 0) {
     
                        return layer.msg('删除分类失败！')
                    }
                    layer.msg('删除分类成功！')
                    layer.close(index)
                    initArtCateList()
                }
            })
        })
    })
})

`art_list.js`

$(function () {
     
    var layer = layui.layer;
    var form = layui.form;
    var laypage = layui.laypage;

    // 定义美化时间的过滤器
    template.defaults.imports.dataFormat = function (date) {
     
        const dt = new Date(date)

        var y = dt.getFullYear()
        var m = padZero(dt.getMonth() + 1)
        var d = padZero(dt.getDate())

        var hh = padZero(dt.getHours())
        var mm = padZero(dt.getMinutes())
        var ss = padZero(dt.getSeconds())

        return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
    }

    // 定义补零的函数
    function padZero(n) {
     
        return n > 9 ? n : '0' + n
    }

    // 定义一个查询的参数对象，将来请求数据的时候，
    // 需要将请求参数对象提交到服务器
    var q = {
     
        pagenum: 1, // 页码值，默认请求第一页的数据
        pagesize: 2, // 每页显示几条数据，默认每页显示2条
        cate_id: '', // 文章分类的 Id
        state: '' // 文章的发布状态
    }

    initTable()
    initCate()

    // 获取文章列表数据的方法
    function initTable() {
     
        $.ajax({
     
            method: 'GET',
            url: '/my/article/list',
            data: q,
            success: function (res) {
     
                if (res.status !== 0) {
     
                    return layer.msg('获取文章列表失败！')
                }
                // 使用模板引擎渲染页面的数据
                var htmlStr = template('tpl-table', res)
                $('tbody').html(htmlStr)
                // 调用渲染分页的方法
                renderPage(res.total)
            }
        })
    }

    // 初始化文章分类的方法
    function initCate() {
     
        $.ajax({
     
            method: 'GET',
            url: '/my/article/cates',
            success: function (res) {
     
                if (res.status !== 0) {
     
                    return layer.msg('获取分类数据失败！')
                }
                // 调用模板引擎渲染分类的可选项
                var htmlStr = template('tpl-cate', res)
                $('[name=cate_id]').html(htmlStr)
                // 通过 layui 重新渲染表单区域的UI结构
                form.render()
            }
        })
    }

    // 为筛选表单绑定 submit 事件
    $('#form-search').on('submit', function (e) {
     
        e.preventDefault()
        // 获取表单中选中项的值
        var cate_id = $('[name=cate_id]').val()
        var state = $('[name=state]').val()
        // 为查询参数对象 q 中对应的属性赋值
        q.cate_id = cate_id
        q.state = state
        // 根据最新的筛选条件，重新渲染表格的数据
        initTable()
    })

    // 定义渲染分页的方法
    function renderPage(total) {
     
        // 调用 laypage.render() 方法来渲染分页的结构
        laypage.render({
     
            elem: 'pageBox', // 分页容器的 Id
            count: total, // 总数据条数
            limit: q.pagesize, // 每页显示几条数据
            curr: q.pagenum, // 设置默认被选中的分页
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            limits: [2, 3, 5, 10],
            // 分页发生切换的时候，触发 jump 回调
            // 触发 jump 回调的方式有两种：
            // 1. 点击页码的时候，会触发 jump 回调
            // 2. 只要调用了 laypage.render() 方法，就会触发 jump 回调
            jump: function (obj, first) {
     
                // 可以通过 first 的值，来判断是通过哪种方式，触发的 jump 回调
                // 如果 first 的值为 true，证明是方式2触发的
                // 否则就是方式1触发的
                console.log(first)
                console.log(obj.curr)
                // 把最新的页码值，赋值到 q 这个查询参数对象中
                q.pagenum = obj.curr
                // 把最新的条目数，赋值到 q 这个查询参数对象的 pagesize 属性中
                q.pagesize = obj.limit
                // 根据最新的 q 获取对应的数据列表，并渲染表格
                // initTable()
                if (!first) {
     
                    initTable()
                }
            }
        })
    }

    // 通过代理的形式，为删除按钮绑定点击事件处理函数
    $('tbody').on('click', '.btn-delete', function () {
     
        // 获取删除按钮的个数
        var len = $('.btn-delete').length
        // 获取到文章的 id
        var id = $(this).attr('data-id')
        // 询问用户是否要删除数据
        layer.confirm('确认删除?', {
     
            icon: 3,
            title: '提示'
        }, function (index) {
     
            $.ajax({
     
                method: 'GET',
                url: '/my/article/delete/' + id,
                success: function (res) {
     
                    if (res.status !== 0) {
     
                        return layer.msg('删除文章失败！')
                    }
                    layer.msg('删除文章成功！')
                    // 当数据删除完成后，需要判断当前这一页中，是否还有剩余的数据
                    // 如果没有剩余的数据了,则让页码值 -1 之后,
                    // 再重新调用 initTable 方法
                    // 4
                    if (len === 1) {
     
                        // 如果 len 的值等于1，证明删除完毕之后，页面上就没有任何数据了
                        // 页码值最小必须是 1
                        q.pagenum = q.pagenum === 1 ? 1 : q.pagenum - 1
                    }
                    initTable()
                }
            })

            layer.close(index)
        })
    })
})

`art_pub.js`

$(function () {
     
    var layer = layui.layer
    var form = layui.form

    initCate()
    // 初始化富文本编辑器
    initEditor()

    // 定义加载文章分类的方法
    function initCate() {
     
        $.ajax({
     
            method: 'GET',
            url: '/my/article/cates',
            success: function (res) {
     
                if (res.status !== 0) {
     
                    return layer.msg('初始化文章分类失败！')
                }
                // 调用模板引擎，渲染分类的下拉菜单
                var htmlStr = template('tpl-cate', res)
                $('[name=cate_id]').html(htmlStr)
                // 一定要记得调用 form.render() 方法
                form.render()
            }
        })
    }

    // 1. 初始化图片裁剪器
    var $image = $('#image')

    // 2. 裁剪选项
    var options = {
     
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }

    // 3. 初始化裁剪区域
    $image.cropper(options)

    // 为选择封面的按钮，绑定点击事件处理函数
    $('#btnChooseImage').on('click', function () {
     
        $('#coverFile').click()
    })

    // 监听 coverFile 的 change 事件，获取用户选择的文件列表
    $('#coverFile').on('change', function (e) {
     
        // 获取到文件的列表数组
        var files = e.target.files
        // 判断用户是否选择了文件
        if (files.length === 0) {
     
            return
        }
        // 根据文件，创建对应的 URL 地址
        var newImgURL = URL.createObjectURL(files[0])
        // 为裁剪区域重新设置图片
        $image
            .cropper('destroy') // 销毁旧的裁剪区域
            .attr('src', newImgURL) // 重新设置图片路径
            .cropper(options) // 重新初始化裁剪区域
    })

    // 定义文章的发布状态
    var art_state = '已发布'

    // 为存为草稿按钮，绑定点击事件处理函数
    $('#btnSave2').on('click', function () {
     
        art_state = '草稿'
    })

    // 为表单绑定 submit 提交事件
    $('#form-pub').on('submit', function (e) {
     
        // 1. 阻止表单的默认提交行为
        e.preventDefault()
        // 2. 基于 form 表单，快速创建一个 FormData 对象
        var fd = new FormData($(this)[0]) //通过 $(this)[0] 的方式将 jQuery 对象转换为原生的对象
        // 3. 将文章的发布状态，存到 fd 中
        fd.append('state', art_state)
        // 4. 将封面裁剪过后的图片，输出为一个文件对象
        $image
            .cropper('getCroppedCanvas', {
     
                // 创建一个 Canvas 画布
                width: 400,
                height: 280
            })
            .toBlob(function (blob) {
     
                // 将 Canvas 画布上的内容，转化为文件对象
                // 得到文件对象后，进行后续的操作
                // 5. 将文件对象，存储到 fd 中
                fd.append('cover_img', blob)
                // 6. 发起 ajax 数据请求
                publishArticle(fd)
            })
    })

    // 定义一个发布文章的方法
    function publishArticle(fd) {
     
        $.ajax({
     
            method: 'POST',
            url: '/my/article/add',
            data: fd,
            // 注意：如果向服务器提交的是 FormData 格式的数据，
            // 必须添加以下两个配置项
            contentType: false,
            processData: false,
            success: function (res) {
     
                if (res.status !== 0) {
     
                    return layer.msg('发布文章失败！')
                }
                layer.msg('发布文章成功！')
                // 发布文章成功后，跳转到文章列表页面
                location.href = '/article/art_list.html'
            }
        })
    }
})

user

`user_avatar.js`

$(function () {
     
    var layer = layui.layer;

    // 1.1 获取裁剪区域的 DOM 元素
    var $image = $('#image');
    // 1.2 配置选项
    const options = {
     
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域
        preview: '.img-preview'
    }

    // 1.3 创建裁剪区域
    $image.cropper(options);

    // 为上传按钮绑定点击事件
    $('#btnChooseImage').on('click', function () {
     
        $('#file').click();
    })

    // 为文件选择框绑定 change 事件
    $('#file').on('change', function (e) {
     
        // 获取用户选择的文件
        var filelist = e.target.files;
        if (filelist.length === 0) {
     
            return layer.msg('请选择照片！');
        }

        // 1. 拿到用户选择的文件
        var file = e.target.files[0];
        // 2. 将文件，转化为路径
        var imgURL = URL.createObjectURL(file);
        // 3. 重新初始化裁剪区域
        $image
            .cropper('destroy') // 销毁旧的裁剪区域
            .attr('src', imgURL) // 重新设置图片路径
            .cropper(options) // 重新初始化裁剪区域
    })

    // 为确定按钮，绑定点击事件
    $('#btnUpload').on('click', function () {
     
        // 1. 要拿到用户裁剪之后的头像
        var dataURL = $image
            .cropper('getCroppedCanvas', {
     
                // 创建一个 Canvas 画布
                width: 100,
                height: 100
            })
            .toDataURL('image/png') // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
        // 2. 调用接口，把头像上传到服务器
        $.ajax({
     
            method: 'POST',
            url: '/my/update/avatar',
            data: {
     
                avatar: dataURL
            },
            success: function (res) {
     
                if (res.status !== 0) {
     
                    return layer.msg('更换头像失败！');
                }
                layer.msg('更换头像成功！');
                window.parent.getUserInfo();
            }
        })
    })
})

`user_info.js`

$(function () {
     
    var form = layui.form;
    var layer = layui.layer;

    form.verify({
     
        nickname: function (value) {
     
            if (value.length > 6) {
     
                return '昵称长度必须在 1 ~ 6 个字符之间！'
            }
        }
    })

    initUserInfo();

    // 初始化用户的基本信息
    function initUserInfo() {
     
        $.ajax({
     
            method: 'GET',
            url: '/my/userinfo',
            success: function (res) {
     
                if (res.status !== 0) {
     
                    return layer.msg('获取用户信息失败！');
                }
                console.log(res);
                // 调用 form.val() 快速为表单赋值
                form.val('formUserInfo', res.data);
            }
        })
    }

    // 重置表单的数据
    $('#btbReset').on('click', function (e) {
     
        // 阻止表单的默认重置行为
        e.preventDefault();
        initUserInfo();
    })

    // 监听表单的提交事件
    $('.layui-form').on('submit', function (e) {
     
        // 阻止表单的默认提交行为
        e.preventDefault();
        // 发起 ajax 数据请求
        $.ajax({
     
            method: 'POST',
            url: '/my/userinfo',
            data: $(this).serialize(),
            success: function (res) {
     
                if (res.status !== 0) {
     
                    return layer.msg('更新用户信息失败！');
                }
                layer.msg('更新用户信息成功！');
                // 调用父页面中的方法，重新渲染用户的头像和用户的信息
                window.parent.getUserInfo();
            }
        })
    })
})

`user_pwd.js`

$(function () {
     
    var form = layui.form

    form.verify({
     
        pwd: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
        samePwd: function (value) {
     
            if (value === $('[name=oldPwd]').val()) {
     
                return '新旧密码不能相同！'
            }
        },
        rePwd: function (value) {
     
            if (value !== $('[name=newPwd]').val()) {
     
                return '两次密码不一致！'
            }
        }
    })

    $('.layui-form').on('submit', function (e) {
     
        e.preventDefault()
        $.ajax({
     
            method: 'POST',
            url: '/my/updatepwd',
            data: $(this).serialize(),
            success: function (res) {
     
                if (res.status !== 0) {
     
                    return layui.layer.msg('更新密码失败！');
                }
                layui.layer.msg('更新密码成功！');
                // 重置表单
                $('.layui-form')[0].reset();
            }
        })
    })
})

`baseAPI.js`

// 注意：每次调用 $.get() 或 $.post() 或 $.ajax() 的时候，
// 会先调用 ajaxPrefilter 这个函数
// 在这个函数中，可以拿到我们给Ajax提供的配置对象
$.ajaxPrefilter(function (options) {
     
  // 在发起真正的 Ajax 请求之前，统一拼接请求的根路径
  options.url = 'http://ajax.frontend.itheima.net' + options.url;

  // 统一为有权限的接口，设置 headers 请求头
  if (options.url.indexOf('/my') !== -1) {
     
    options.headers = {
     
      Authorization: localStorage.getItem('token') || '',
    }
  }

  // 全局挂载 complete 回调函数
  options.complete = function (res) {
     
    // console.log('执行了 complete 回调：');
    // console.log('res');
    // 在 complete 回调函数中，可以使用 res.responseJSON 拿到服务器响应回来的数据
    if (res.responseJSON.status === 1 && res.responseJSON.message === '身份认证失败！') {
     
      // 1. 强制清空 token
      localStorage.removeItem('token');
      // 2. 强制跳转到登录页面
      location.href = '/login.html';
    }
  }
});

`index.js`

$(function () {
     
    // 调用 getUserInfo 获取用户基本信息
    getUserInfo()

    var layer = layui.layer

    // 点击按钮，实现退出功能
    $('#btnLogout').on('click', function () {
     
        // 提示用户是否确认退出
        layer.confirm('确定退出登录?', {
     
            icon: 3,
            title: '提示'
        }, function (index) {
     
            //do something
            // 1. 清空本地存储中的 token
            localStorage.removeItem('token')
            // 2. 重新跳转到登录页面
            location.href = '/login.html'

            // 关闭 confirm 询问框
            layer.close(index)
        })
    })
})

// 获取用户的基本信息
function getUserInfo() {
     
    $.ajax({
     
        method: 'GET',
        url: '/my/userinfo',
        success: function (res) {
     
            if (res.status !== 0) {
     
                return layui.layer.msg('获取用户信息失败！')
            }
            // 调用 renderAvatar 渲染用户的头像
            renderAvatar(res.data)
        }
        // 不论成功还是失败，最终都会调用 complete 回调函数
        // complete: function(res) {
     
        //   // console.log('执行了 complete 回调：')
        //   // console.log(res)
        //   // 在 complete 回调函数中，可以使用 res.responseJSON 拿到服务器响应回来的数据
        //   if (res.responseJSON.status === 1 && res.responseJSON.message === '身份认证失败！') {
     
        //     // 1. 强制清空 token
        //     localStorage.removeItem('token')
        //     // 2. 强制跳转到登录页面
        //     location.href = '/login.html'
        //   }
        // }
    })
}

// 渲染用户的头像
function renderAvatar(user) {
     
    // 1. 获取用户的名称
    var name = user.nickname || user.username
    // 2. 设置欢迎的文本
    $('#welcome').html('欢迎  ' + name)
    // 3. 按需渲染用户的头像
    if (user.user_pic !== null) {
     
        // 3.1 渲染图片头像
        $('.layui-nav-img')
            .attr('src', user.user_pic)
            .show()
        $('.text-avatar').hide()
    } else {
     
        // 3.2 渲染文本头像
        $('.layui-nav-img').hide()
        var first = name[0].toUpperCase()
        $('.text-avatar')
            .html(first)
            .show()
    }
}

`login.js`

$(function () {
     
    // 点击“去注册账号”的链接
    $('#link_reg').on('click', function () {
     
        $('.login-box').hide();
        $('.reg-box').show();
    });

    // 点击“去登录”的链接
    $('#link_login').on('click', function () {
     
        $('.login-box').show();
        $('.reg-box').hide();
    });

    // 从 layui 中获取 form 对象
    var form = layui.form;
    var layer = layui.layer;
    // 通过 form.verify() 函数自定义校验规则
    form.verify({
     
        // 自定义了一个叫做 pwd 校验规则
        pwd: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
        // 校验两次密码是否一致的规则
        repwd: function (value) {
     
            // 通过形参拿到的是确认密码框中的内容
            // 还需要拿到密码框中的内容
            // 然后进行一次等于的判断
            // 如果判断失败,则return一个提示消息即可
            // $('.reg-box [name=password]') 属性选择器
            var pwd = $('.reg-box [name=password]').val();
            if (pwd !== value) {
     
                return '两次密码不一致！';
            };
        }
    });

    // 监听注册表单的提交事件
    $('#form_reg').on('submit', function (e) {
     
        // 1. 阻止默认的提交行为
        e.preventDefault();
        // 2. 发起Ajax的POST请求
        var data = {
     
            username: $('#form_reg [name=username]').val(),
            password: $('#form_reg [name=password]').val()
        };
        $.post('/api/reguser', data, function (res) {
     
            if (res.status !== 0) {
     
                return layer.msg(res.message);
            };
            layer.msg('注册成功，请登录！');
            // 模拟人的点击行为
            $('#link_login').click();
        });
    });

    // 监听登录表单的提交事件
    $('#form_login').submit(function (e) {
     
        // 阻止默认提交行为
        e.preventDefault()
        $.ajax({
     
            url: '/api/login',
            method: 'POST',
            // 快速获取表单中的数据
            data: $(this).serialize(),
            success: function (res) {
     
                if (res.status !== 0) {
     
                    return layer.msg('登录失败！')
                }
                layer.msg('登录成功！')
                // 将登录成功得到的 token 字符串，保存到 localStorage 中
                localStorage.setItem('token', res.token)
                // 跳转到后台主页
                location.href = '/index.html'
            }
        })
    })
})

home

`dashboard.html`


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>图表统计title>
  <link rel="stylesheet" href="/assets/lib/bootstrap.css" />
  <link rel="stylesheet" href="/assets/lib/main.css" />
  <script src="/assets/lib/jquery.js">script>
  <script type="text/javascript" src="/assets/lib/echarts.min.js">script>
head>

<body>
  <div class="container-fluid">
    <div class="row spannel_list">
      <div class="col-sm-3 col-xs-6">
        <div class="spannel">
          <em>10015em><span>篇span>
          <b>总文章数b>
        div>
      div>
      <div class="col-sm-3 col-xs-6">
        <div class="spannel scolor01">
          <em>123em><span>篇span>
          <b>日新增文章数b>
        div>
      div>
      <div class="col-sm-3 col-xs-6">
        <div class="spannel scolor02">
          <em>35em><span>条span>
          <b>评论总数b>
        div>
      div>
      <div class="col-sm-3 col-xs-6">
        <div class="spannel scolor03">
          <em>123em><span>条span>
          <b>日新增评论数b>
        div>
      div>
    div>
  div>

  <div class="container-fluid">
    <div class="row curve-pie">
      <div class="col-lg-8 col-md-8">
        <div class="gragh_pannel" id="curve_show">div>
      div>
      <div class="col-lg-4 col-md-4">
        <div class="gragh_pannel" id="pie_show">div>
      div>
    div>
  div>

  <div class="container-fluid">
    <div class="column_pannel" id="column_show">div>
  div>

  <script>
    var oChart = echarts.init(document.getElementById('curve_show'));
    var aList_all = [
      {
       'count': 36, 'date': '2019-04-13' },
      {
       'count': 52, 'date': '2019-04-14' },
      {
       'count': 78, 'date': '2019-04-15' },
      {
       'count': 85, 'date': '2019-04-16' },
      {
       'count': 65, 'date': '2019-04-17' },
      {
       'count': 72, 'date': '2019-04-18' },
      {
       'count': 88, 'date': '2019-04-19' },
      {
       'count': 64, 'date': '2019-04-20' },
      {
       'count': 72, 'date': '2019-04-21' },
      {
       'count': 90, 'date': '2019-04-22' },
      {
       'count': 96, 'date': '2019-04-23' },
      {
       'count': 100, 'date': '2019-04-24' },
      {
       'count': 102, 'date': '2019-04-25' },
      {
       'count': 110, 'date': '2019-04-26' },
      {
       'count': 123, 'date': '2019-04-27' },
      {
       'count': 100, 'date': '2019-04-28' },
      {
       'count': 132, 'date': '2019-04-29' },
      {
       'count': 146, 'date': '2019-04-30' },
      {
       'count': 200, 'date': '2019-05-01' },
      {
       'count': 180, 'date': '2019-05-02' },
      {
       'count': 163, 'date': '2019-05-03' },
      {
       'count': 110, 'date': '2019-05-04' },
      {
       'count': 80, 'date': '2019-05-05' },
      {
       'count': 82, 'date': '2019-05-06' },
      {
       'count': 70, 'date': '2019-05-07' },
      {
       'count': 65, 'date': '2019-05-08' },
      {
       'count': 54, 'date': '2019-05-09' },
      {
       'count': 40, 'date': '2019-05-10' },
      {
       'count': 45, 'date': '2019-05-11' },
      {
       'count': 38, 'date': '2019-05-12' },
    ];

    let aCount = [];
    let aDate = [];

    for (var i = 0; i < aList_all.length; i++) {
      
      aCount.push(aList_all[i].count);
      aDate.push(aList_all[i].date);
    }

    var chartopt = {
      
      title: {
      
        text: '月新增文章数',
        left: 'center',
        top: '10'
      },
      tooltip: {
      
        trigger: 'axis'
      },
      legend: {
      
        data: ['新增文章'],
        top: '40'
      },
      toolbox: {
      
        show: true,
        feature: {
      
          mark: {
       show: true },
          dataView: {
       show: true, readOnly: false },
          magicType: {
       show: true, type: ['line', 'bar'] },
          restore: {
       show: true },
          saveAsImage: {
       show: true }
        }
      },
      calculable: true,
      xAxis: [
        {
      
          name: '日',
          type: 'category',
          boundaryGap: false,
          data: aDate
        }
      ],
      yAxis: [
        {
      
          name: '月新增文章数',
          type: 'value'
        }
      ],
      series: [
        {
      
          name: '新增文章',
          type: 'line',
          smooth: true,
          itemStyle: {
       normal: {
       areaStyle: {
       type: 'default' }, color: '#f80' }, lineStyle: {
       color: '#f80' } },
          data: aCount
        }],
      areaStyle: {
      
        normal: {
      
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      
            offset: 0,
            color: 'rgba(255,136,0,0.39)'
          }, {
      
            offset: .34,
            color: 'rgba(255,180,0,0.25)'
          }, {
      
            offset: 1,
            color: 'rgba(255,222,0,0.00)'
          }])

        }
      },
      grid: {
      
        show: true,
        x: 50,
        x2: 50,
        y: 80,
        height: 220
      }
    };

    oChart.setOption(chartopt);


    var oPie = echarts.init(document.getElementById('pie_show'));
    var oPieopt =
    {
      
      title: {
      
        top: 10,
        text: '分类文章数量比',
        x: 'center'
      },
      tooltip: {
      
        trigger: 'item',
        formatter: "{a} 
{b} : {c} ({d}%)"
      },
      color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565'],
      legend: {
      
        x: 'center',
        top: 65,
        data: ['奇趣事', '会生活', '爱旅行', '趣美味']
      },
      toolbox: {
      
        show: true,
        x: 'center',
        top: 35,
        feature: {
      
          mark: {
       show: true },
          dataView: {
       show: true, readOnly: false },
          magicType: {
      
            show: true,
            type: ['pie', 'funnel'],
            option: {
      
              funnel: {
      
                x: '25%',
                width: '50%',
                funnelAlign: 'left',
                max: 1548
              }
            }
          },
          restore: {
       show: true },
          saveAsImage: {
       show: true }
        }
      },
      calculable: true,
      series: [
        {
      
          name: '访问来源',
          type: 'pie',
          radius: ['45%', '60%'],
          center: ['50%', '65%'],
          data: [
            {
       value: 300, name: '奇趣事' },
            {
       value: 100, name: '会生活' },
            {
       value: 260, name: '爱旅行' },
            {
       value: 180, name: '趣美味' }
          ]
        }
      ]
    };
    oPie.setOption(oPieopt);



    var oColumn = this.echarts.init(document.getElementById('column_show'));
    var oColumnopt =
    {
      
      title: {
      
        text: '文章访问量',
        left: 'center',
        top: '10'
      },
      tooltip: {
      
        trigger: 'axis'
      },
      legend: {
      
        data: ['奇趣事', '会生活', '爱旅行', '趣美味'],
        top: '40'
      },
      toolbox: {
      
        show: true,
        feature: {
      
          mark: {
       show: true },
          dataView: {
       show: true, readOnly: false },
          magicType: {
       show: true, type: ['line', 'bar'] },
          restore: {
       show: true },
          saveAsImage: {
       show: true }
        }
      },
      calculable: true,
      xAxis: [
        {
      
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月']
        }
      ],
      yAxis: [
        {
      
          name: '访问量',
          type: 'value'
        }
      ],
      series: [
        {
      
          name: '奇趣事',
          type: 'bar',
          barWidth: 20,
          itemStyle: {
      
            normal: {
       areaStyle: {
       type: 'default' }, color: '#fd956a' }
          },
          data: [800, 708, 920, 1090, 1200]
        },
        {
      
          name: '会生活',
          type: 'bar',
          barWidth: 20,
          itemStyle: {
      
            normal: {
       areaStyle: {
       type: 'default' }, color: '#2bb6db' }
          },
          data: [400, 468, 520, 690, 800]
        },
        {
      
          name: '爱旅行',
          type: 'bar',
          barWidth: 20,
          itemStyle: {
      
            normal: {
       areaStyle: {
       type: 'default' }, color: '#13cfd5' }
          },
          data: [500, 668, 520, 790, 900]
        },
        {
      
          name: '趣美味',
          type: 'bar',
          barWidth: 20,
          itemStyle: {
      
            normal: {
       areaStyle: {
       type: 'default' }, color: '#00ce68' }
          },
          data: [600, 508, 720, 890, 1000]
        }
      ],
      grid: {
      
        show: true,
        x: 50,
        x2: 30,
        y: 80,
        height: 260
      },
      dataZoom: [//给x轴设置滚动条
        {
      
          start: 0,//默认为0
          end: 100 - 1000 / 31,//默认为100
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          handleSize: 0,//滑动条的 左右2个滑动条的大小
          height: 8,//组件高度
          left: 45, //左边的距离
          right: 50,//右边的距离
          bottom: 26,//右边的距离
          handleColor: '#ddd',//h滑动图标的颜色
          handleStyle: {
      
            borderColor: "#cacaca",
            borderWidth: "1",
            shadowBlur: 2,
            background: "#ddd",
            shadowColor: "#ddd",
          }
        }]
    };
    oColumn.setOption(oColumnopt);
  script>
body>

html>

user

`user_avatar.html`


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <link rel="stylesheet" href="/assets/lib/layui/css/layui.css">
    
    <link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />
    
    <link rel="stylesheet" href="/assets/css/user/user_avatar.css">
head>

<body>
    
    <div class="layui-card">
        <div class="layui-card-header">更换头像div>
        <div class="layui-card-body">
            
            <div class="row1">
                
                <div class="cropper-box">
                    
                    <img id="image" src="/assets/images/sample.jpg" />
                div>
                
                <div class="preview-box">
                    <div>
                        
                        <div class="img-preview w100">div>
                        <p class="size">100 x 100p>
                    div>
                    <div>
                        
                        <div class="img-preview w50">div>
                        <p class="size">50 x 50p>
                    div>
                div>
            div>

            
            <div class="row2">
                
                <input type="file" id="file" accept="image/png,image/jpeg">
                <button type="button" class="layui-btn" id="btnChooseImage">上传button>
                <button type="button" class="layui-btn layui-btn-danger" id="btnUpload">确定button>
            div>
        div>
    div>
    
    <script src="/assets/lib/layui/layui.all.js">script>
    
    <script src="/assets/lib/jquery.js">script>
    
    <script src="/assets/lib/cropper/Cropper.js">script>
    <script src="/assets/lib/cropper/jquery-cropper.js">script>
    
    <script src="/assets/js/baseAPI.js">script>
    
    <script src="/assets/js/user/user_avatar.js">script>
body>

html>

`user_info.html`


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <link rel="stylesheet" href="/assets/lib/layui/css/layui.css">
    
    <link rel="stylesheet" href="/assets/css/user/user_info.css">
head>

<body>
    
    <div class="layui-card">
        <div class="layui-card-header">修改用户信息div>
        <div class="layui-card-body">
            
            <form class="layui-form" lay-filter="formUserInfo">
                
                <input type="hidden" class="id" value="">
                <div class="layui-form-item">
                    <label class="layui-form-label">登录名称label>
                    <div class="layui-input-block">
                        <input type="text" name="username" required lay-verify="required" placeholder="请输入登录名称"
                            autocomplete="off" class="layui-input" readonly />
                    div>
                div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户昵称label>
                    <div class="layui-input-block">
                        <input type="text" name="nickname" required lay-verify="required|nickname" placeholder="请输入用户昵称"
                            autocomplete="off" class="layui-input" />
                    div>
                div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户邮箱label>
                    <div class="layui-input-block">
                        <input type="text" name="email" required lay-verify="required|email" placeholder="请输入用户邮箱"
                            autocomplete="off" class="layui-input" />
                    div>
                div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">提交修改button>
                        <button type="reset" class="layui-btn layui-btn-primary" id="btbReset">重置button>
                    div>
                div>
            form>
            
        div>
    div>

    
    <script src="/assets/lib/layui/layui.all.js">script>
    
    <script src="/assets/lib/jquery.js">script>
    
    <script src="/assets/js/baseAPI.js">script>
    
    <script src="/assets/js/user/user_info.js">script>
body>

html>

`user_pwd.html`


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <link rel="stylesheet" href="/assets/lib/layui/css/layui.css">
    
    <link rel="stylesheet" href="/assets/css/user/user_info.css">
head>

<body>
    
    <div class="layui-card">
        <div class="layui-card-header">修改密码div>
        <div class="layui-card-body">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">原密码label>
                    <div class="layui-input-block">
                        <input type="password" name="oldPwd" required lay-verify="required|pwd" placeholder="请输入原密码"
                            autocomplete="off" class="layui-input" />
                    div>
                div>
                <div class="layui-form-item">
                    <label class="layui-form-label">新密码label>
                    <div class="layui-input-block">
                        <input type="password" name="newPwd" required lay-verify="required|pwd|samePwd"
                            placeholder="请输入新密码" autocomplete="off" class="layui-input" />
                    div>
                div>
                <div class="layui-form-item">
                    <label class="layui-form-label">确认新密码label>
                    <div class="layui-input-block">
                        <input type="password" name="rePwd" required lay-verify="required|pwd|rePwd"
                            placeholder="请再次确认密码" autocomplete="off" class="layui-input" />
                    div>
                div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">修改密码button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置button>
                    div>
                div>
            form>
        div>
    div>

    
    <script src="/assets/lib/layui/layui.all.js">script>
    
    <script src="/assets/lib/jquery.js">script>
    
    <script src="/assets/js/baseAPI.js">script>
    
    <script src="/assets/js/user/user_pwd.js">script>

body>

html>

`index.html`


<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <link rel="stylesheet" href="/assets/lib/layui/css/layui.css">
    
    <link rel="stylesheet" href="/assets/fonts/iconfont.css">
    
    <link rel="stylesheet" href="/assets/css/index.css">
head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">
                <img src="/assets/images/logo.png" alt="">
            div>
            
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;" class="userInfo">
                        <img src="http://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                            class="layui-nav-img">
                        <span class="text-avatar">Aspan>
                        个人中心
                    a>
                    <dl class="layui-nav-child">
                        <dd><a href="/user/user_info.html" target="fm">基本资料a>dd>
                        <dd><a href="/user/user_avatar.html" target="fm">更换头像a>dd>
                        <dd><a href="/user/user_pwd.html" target="fm">重置密码a>dd>
                    dl>
                li>
                <li class="layui-nav-item">
                    <a href="javascript:;" id="btnLogout">
                        <span class="iconfont icon-tuichu">span>
                        退出
                    a>
                li>
            ul>
        div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <div class="userInfo">
                    <img src="http://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                        class="layui-nav-img">
                    <span class="text-avatar">Aspan>
                    <span id="welcome">
                        欢迎 ***
                    span>
                div>
                
                <ul class="layui-nav layui-nav-tree" lay-shrink="all">
                    <li class="layui-nav-item layui-this">
                        <a href="/home/dashboard.html" target="fm">
                            <span class="iconfont icon-home">span>
                            首页
                        a>
                    li>
                    <li class="layui-nav-item">
                        <a class="" href="javascript:;">
                            <span class="iconfont icon-16">span>
                            文章管理
                        a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="/article/art_cate.html" target="fm">
                                    <i class="layui-icon layui-icon-app">i>
                                    文章类别
                                a>
                            dd>
                            <dd>
                                <a href="/article/art_list.html" target="fm">
                                    <i class="layui-icon layui-icon-app">i>
                                    文章列表
                                a>
                            dd>
                            <dd>
                                <a href="/article/art_pub.html" target="fm">
                                    <i class="layui-icon layui-icon-app">i>
                                    发布文章
                                a>
                            dd>
                        dl>
                    li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">
                            <span class="iconfont icon-user">span>
                            个人中心
                        a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="/user/user_info.html" target="fm">
                                    <i class="layui-icon layui-icon-app">i>
                                    基本资料
                                a>
                            dd>
                            <dd>
                                <a href="/user/user_avatar.html" target="fm">
                                    <i class="layui-icon layui-icon-app">i>
                                    更换头像
                                a>
                            dd>
                            <dd>
                                <a href="/user/user_pwd.html" target="fm">
                                    <i class="layui-icon layui-icon-app">i>
                                    重置密码
                                a>
                            dd>
                        dl>
                    li>
                ul>
            div>
        div>
        <div class="layui-body">
            
            <iframe name="fm" src="/home/dashboard.html" frameborder="0">iframe>
        div>
        <div class="layui-footer">
            
            © www.itheima.com - 黑马程序员
        div>
    div>
    
    <script src="/assets/lib/layui/layui.all.js">script>
    
    <script src="/assets/lib/jquery.js">script>
    
    <script src="/assets/js/baseAPI.js">script>
    导入自己的 JS 文件
    <script src="/assets/js/index.js">script>
body>

html>

`login.html`


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大事件-登录/注册title>
    
    <link rel="stylesheet" href="/assets/lib/layui/css/layui.css">
    
    <link rel="stylesheet" href="/assets/css/login.css">
head>

<body>
    
    <div class="layui-main">
        <img src="/assets/images/logo.png" alt="">
    div>
    

    
    <div class="loginAndRegBox">
        <div class="title-box">div>
        
        <div class="login-box">
            
            <form class="layui-form" id="form_login">
                
                <div class="layui-form-item">
                    <i class="layui-icon layui-icon-username">i>
                    <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
                        autocomplete="off" class="layui-input" />
                div>
                
                
                <div class="layui-form-item">
                    <i class="layui-icon layui-icon-password">i>
                    <input type="password" name="password" required lay-verify="required|pwd" placeholder="请输入密码"
                        autocomplete="off" class="layui-input" />
                div>
                
                
                <div class="layui-form-item">
                    
                    <button class="layui-btn layui-btn-fluid layui-btn-normal" lay-submit>登录button>
                div>
                
                <div class="layui-form-item links">
                    <a href="javascript:;" id="link_reg">去注册账号a>
                div>
            form>
            
        div>
        
        
        <div class="reg-box">
            
            <form class="layui-form" id="form_reg">
                
                <div class="layui-form-item">
                    <i class="layui-icon layui-icon-username">i>
                    <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
                        autocomplete="off" class="layui-input" />
                div>
                
                
                <div class="layui-form-item">
                    <i class="layui-icon layui-icon-password">i>
                    <input type="password" name="password" required lay-verify="required|pwd" placeholder="请输入密码"
                        autocomplete="off" class="layui-input" />
                div>
                
                
                <div class="layui-form-item">
                    <i class="layui-icon layui-icon-password">i>
                    <input type="password" name="repassword" required lay-verify="required|pwd|repwd"
                        placeholder="再次确认密码" autocomplete="off" class="layui-input" />
                div>
                
                
                <div class="layui-form-item">
                    
                    <button class="layui-btn layui-btn-fluid layui-btn-normal" lay-submit>注册button>
                div>
                
                <div class="layui-form-item links">
                    <a href="javascript:;" id="link_login">去登录a>
                div>
            form>
            


        div>
        
    div>
    

    
    <script src="/assets/lib/layui/layui.all.js">script>
    
    <script src="/assets/lib/jquery.js">script>
    
    <script src="/assets/js/baseAPI.js">script>
    
    <script src="/assets/js/login.js">script>
body>

html>

大事件项目效果

你可能感兴趣的:(前端,html,css,jquery,ajax,layui框架)

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
Linux下QT开发的动态库界面弹出操作（SDL2） 13jjyao QT类 qt 开发语言 sdl2 linux
需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
利用LangChain的StackExchange组件实现智能问答系统 nseejrukjhad langchain microsoft 数据库 python
利用LangChain的StackExchange组件实现智能问答系统引言在当今的软件开发世界中，StackOverflow已经成为程序员解决问题的首选平台之一。而LangChain作为一个强大的AI应用开发框架，提供了StackExchange组件，使我们能够轻松地将StackOverflow的海量知识库集成到我们的应用中。本文将详细介绍如何使用LangChain的StackExchange组件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
自我意识徐立华
----读帕克.帕尔默《教学勇气》（P18----19）5.铸造我们的学科帕克.帕尔默说学科知识对我们的自身认同和外部世界有启发意义。学科会铸造我们。“在我们与学科的命题概念和学科的生活框架相遇之前，自我意识知识处于潜伏状态，通过回想学科是怎样唤醒自我意识，我们就可以找回教学心灵。”《教学勇气》（P18）我们的自我意识像冰山表面下无限延伸的冰层，常常处于潜伏状态。但是在我们对所教授的学科进行深入思
基于CODESYS的多轴运动控制程序框架：逻辑与运动控制分离，快速开发灵活操作 GPJnCrbBdl python 开发语言
基于codesys开发的多轴运动控制程序框架，将逻辑与运动控制分离，将单轴控制封装成功能块，对该功能块的操作包含了所有的单轴控制（归零、点动、相对定位、绝对定位、设置当前位置、伺服模式切换等等）。程序框架由主程序按照状态调用分归零模式、手动模式、自动模式、故障模式，程序状态的跳转都已完成，只需要根据不同的工艺要求完成所需的动作即可。变量的声明、地址的规划都严格按照C++的标准定义，能帮助开发者快速
SpringBlade dict-biz/list 接口 SQL 注入漏洞文章永久免费只为良心 oracle 数据库
SpringBladedict-biz/list接口SQL注入漏洞POC:构造请求包查看返回包你的网址/api/blade-system/dict-biz/list?updatexml(1,concat(0x7e,md5(1),0x7e),1)=1漏洞概述在SpringBlade框架中，如果dict-biz/list接口的后台处理逻辑没有正确地对用户输入进行过滤或参数化查询（PreparedSta
insert into select 主键自增_mybatis拦截器实现主键自动生成 weixin_39521651 insert into select 主键自增 mybatis delete返回值 mybatis insert返回主键 mybatis insert返回对象 mybatis plus insert返回主键 mybatis plus 插入生成id
前言前阵子和朋友聊天，他说他们项目有个需求，要实现主键自动生成，不想每次新增的时候，都手动设置主键。于是我就问他，那你们数据库表设置主键自动递增不就得了。他的回答是他们项目目前的id都是采用雪花算法来生成，因此为了项目稳定性，不会切换id的生成方式。朋友问我有没有什么实现思路，他们公司的orm框架是mybatis，我就建议他说，不然让你老大把mybatis切换成mybatis-plus。mybat
ArrayList 源码解析程序猿进阶 Java基础 ArrayList List java 面试性能优化架构设计 idea
ArrayList是Java集合框架中的一个动态数组实现，提供了可变大小的数组功能。它继承自AbstractList并实现了List接口，是顺序容器，即元素存放的数据与放进去的顺序相同，允许放入null元素，底层通过数组实现。除该类未实现同步外，其余跟Vector大致相同。每个ArrayList都有一个容量capacity，表示底层数组的实际大小，容器内存储元素的个数不能多于当前容量。当向容器中添
Java爬虫框架（一）--架构设计狼图腾-狼之传说 java 框架 java 任务 html解析器存储电子商务
一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
Java：爬虫框架 dingcho Java java 爬虫
一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
Spring MVC 全面指南：从入门到精通的详细解析一杯梅子酱技术栈学习 spring mvc java
引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri
WebMagic：强大的Java爬虫框架解析与实战 Aaron_945 Java java 爬虫开发语言
文章目录引言官网链接WebMagic原理概述基础使用1.添加依赖2.编写PageProcessor高级使用1.自定义Pipeline2.分布式抓取优点结论引言在大数据时代，网络爬虫作为数据收集的重要工具，扮演着不可或缺的角色。Java作为一门广泛使用的编程语言，在爬虫开发领域也有其独特的优势。WebMagic是一个开源的Java爬虫框架，它提供了简单灵活的API，支持多线程、分布式抓取，以及丰富的
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
00. 这里整理了最全的爬虫框架（Java + Python）有一只柴犬爬虫系列爬虫 java python
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
详解：如何设计出健壮的秒杀系统？夜空_2cd3
作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
今天是总结薛帅
今天来个最后一天的总结。为什么要学习写作技巧呢？就如同建房子，如果想要住的安全、舒服，我们要先打地基，建房子的框架，这样才能随意的装修。那么我们要怎么建好才能建好写作的地基呢？1走直路，少弯路01利他：能够给别人带来价值。02吸引：吸住读者的眼球。03打动：打动人心，引起共鸣。04说服：用数据说话。05刻意：通过有意识的训练。06修改：好的文章至上修改10遍。07模仿：10万+的文章必有成功的道理
Python 课程10-单元测试可愛小吉 Python教學 python 单元测试开发语言 TDD unittest
前言在现代软件开发中，单元测试已成为一种必不可少的实践。通过测试，我们可以确保每个功能模块在开发和修改过程中按预期工作，从而减少软件缺陷，提高代码质量。而测试驱动开发（TDD）则进一步将测试作为开发的核心部分，先编写测试，再编写代码，以测试为指导开发出更稳定、更可靠的代码。Python提供了强大的unittest模块，它是Python标准库的一部分，专门用于编写和执行单元测试。与其他测试框架相比，
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
MyBatis 详解阿贾克斯的黎明 java mybatis
目录目录一、MyBatis是什么二、为什么使用MyBatis（一）灵活性高（二）性能优化（三）易于维护三、怎么用MyBatis（一）添加依赖（二）配置MyBatis（三）创建实体类和接口（四）使用MyBatis一、MyBatis是什么MyBatis是一个优秀的持久层框架，它支持自定义SQL、存储过程以及高级映射。MyBatis免除了几乎所有的JDBC代码以及设置参数和获取结果集的工作。它可以通过简
github中多个平台共存 jackyrong github
在个人电脑上，如何分别链接比如oschina,github等库呢，一般教程之列的，默认 ssh链接一个托管的而已，下面讲解如何放两个文件 1）设置用户名和邮件地址 $ git config --global user.name "xx" $ git config --global user.email "[email protected]"
ip地址与整数的相互转换(javascript) alxw4616 JavaScript
//IP转成整型 function ip2int(ip){ var num = 0; ip = ip.split("."); num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); n
读书笔记-jquey+数据库+css chengxuyuancsdn html jquery oracle
1、grouping ,group by rollup, GROUP BY GROUPING SETS区别 2、$("#totalTable tbody>tr td:nth-child(" + i + ")").css({"width":tdWidth, "margin":"0px", &q
javaSE javaEE javaME == API下载 Array_06 java
oracle下载各种API文档： http://www.oracle.com/technetwork/java/embedded/javame/embed-me/documentation/javame-embedded-apis-2181154.html JavaSE文档： http://docs.oracle.com/javase/8/docs/api/ JavaEE文档： ht
shiro入门学习 cugfy java Web 框架
声明本文只适合初学者，本人也是刚接触而已，经过一段时间的研究小有收获，特来分享下希望和大家互相交流学习。首先配置我们的web.xml代码如下，固定格式，记死就成 <filter> <filter-name>shiroFilter</filter-name> &nbs
Array添加删除方法 357029540 js
刚才做项目前台删除数组的固定下标值时，删除得不是很完整，所以在网上查了下，发现一个不错的方法，也提供给需要的同学。 //给数组添加删除 Array.prototype.del = function(n){
navigation bar 更改颜色张亚雄 IO
今天郁闷了一下午，就因为objective-c默认语言是英文，我写的中文全是一些乱七八糟的样子，到不是乱码，但是，前两个自字是粗体，后两个字正常体，这可郁闷死我了，问了问大牛，人家告诉我说更改一下字体就好啦，比如改成黑体，哇塞，茅塞顿开。翻书看，发现，书上有介绍怎么更改表格中文字字体的，代码如下
unicode转换成中文 adminjun unicode 编码转换
在Java程序中总会出现\u6b22\u8fce\u63d0\u4ea4\u5fae\u535a\u641c\u7d22\u4f7f\u7528\u53cd\u9988\uff0c\u8bf7\u76f4\u63a5这个的字符，这是unicode编码，使用时有时候不会自动转换成中文就需要自己转换了使用下面的方法转换一下即可。 /** * unicode 转换成中文
一站式 Java Web 框架 firefly aijuans Java Web
Firefly是一个高性能一站式Web框架。涵盖了web开发的主要技术栈。包含Template engine、IOC、MVC framework、HTTP Server、Common tools、Log、Json parser等模块。 firefly-2.0_07修复了模版压缩对javascript单行注释的影响，并新增了自定义错误页面功能。更新日志：增加自定义系统错误页面功能
设计模式——单例模式 ayaoxinchao 设计模式
定义 Java中单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。” 分析从定义中可以看出单例的要点有三个：一是某个类只能有一个实例；二是必须自行创建这个实例；三是必须自行向系统提供这个实例。 &nb
Javascript 多浏览器兼容性问题及解决方案 BigBird2012 JavaScript
不论是网站应用还是学习js,大家很注重ie与firefox等浏览器的兼容性问题，毕竟这两中浏览器是占了绝大多数。一、document.formName.item(”itemName”) 问题问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName&quo
JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误 bijian1013 junit4.11 单元测试
下载了最新的JUnit版本，是4.11，结果尝试使用发现总是报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing这样的错误，上网查了一下，一般的解决方案是，换一个低一点的版本就好了。还有人说，是缺少hamcrest的包。去官网看了一下，如下发现：
[Zookeeper学习笔记之二]Zookeeper部署脚本 bit1129 zookeeper
Zookeeper伪分布式安装脚本(此脚本在一台机器上创建Zookeeper三个进程，即创建具有三个节点的Zookeeper集群。这个脚本和zookeeper的tar包放在同一个目录下，脚本中指定的名字是zookeeper的3.4.6版本，需要根据实际情况修改)： #!/bin/bash #!!!Change the name!!! #The zookeepe
【Spark八十】Spark RDD API二 bit1129 spark
coGroup package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.SparkContext._ object CoGroupTest_05 { def main(args: Array[String]) { v
Linux中编译apache服务器modules文件夹缺少模块(.so)的问题 ronin47 modules
在modules目录中只有httpd.exp，那些so文件呢？我尝试在fedora core 3中安装apache 2. 当我解压了apache 2.0.54后使用configure工具并且加入了 --enable-so 或者 --enable-modules=so (两个我都试过了) 去make并且make install了。我希望在/apache2/modules/目录里有各种模块，
Java基础-克隆 BrokenDreams java基础
Java中怎么拷贝一个对象呢？可以通过调用这个对象类型的构造器构造一个新对象，然后将要拷贝对象的属性设置到新对象里面。Java中也有另一种不通过构造器来拷贝对象的方式，这种方式称为克隆。 Java提供了java.lang.
读《研磨设计模式》-代码笔记-适配器模式-Adapter bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 适配器模式解决的主要问题是，现有的方法接口与客户要求的方法接口不一致 * 可以这样想，我们要写这样一个类（Adapter）: * 1.这个类要符合客户的要求 ---> 那显然要
HDR图像PS教程集锦&心得 cherishLC PS
HDR是指高动态范围的图像，主要原理为提高图像的局部对比度。软件有photomatix和nik hdr efex。一、教程叶明在知乎上的回答： http://www.zhihu.com/question/27418267/answer/37317792 大意是修完后直方图最好是等值直方图，方法是HDR软件调一遍，再结合不透明度和蒙版细调。二、心得 1、去除阴影部分的
maven-3.3.3 mvn archetype 列表 crabdave ArcheType
maven-3.3.3 mvn archetype 列表可以参考最新的：http://repo1.maven.org/maven2/archetype-catalog.xml [INFO] Scanning for projects... [INFO]
linux shell 中文件编码查看及转换方法 daizj shell 中文乱码 vim 文件编码
一、查看文件编码。在打开文件的时候输入:set fileencoding 即可显示文件编码格式。二、文件编码转换 1、在Vim中直接进行转换文件编码,比如将一个文件转换成utf-8格式 &
MySQL--binlog日志恢复数据 dcj3sjt126com binlog
恢复数据的重要命令如下 mysql> flush logs; 默认的日志是mysql-bin.000001，现在刷新了重新开启一个就多了一个mysql-bin.000002
数据库中数据表数据迁移方法 dcj3sjt126com sql
刚开始想想好像挺麻烦的，后来找到一种方法了，就SQL中的 INSERT 语句，不过内容是现从另外的表中查出来的，其实就是 MySQL中INSERT INTO SELECT的使用下面看看如何使用语法：MySQL中INSERT INTO SELECT的使用 1. 语法介绍有三张表a、b、c，现在需要从表b
Java反转字符串 dyy_gusi java 反转字符串
前几天看见一篇文章，说使用Java能用几种方式反转一个字符串。首先要明白什么叫反转字符串，就是将一个字符串到过来啦，比如"倒过来念的是小狗"反转过来就是”狗小是的念来过倒“。接下来就把自己能想到的所有方式记录下来了。 1、第一个念头就是直接使用String类的反转方法，对不起，这样是不行的，因为Stri
UI设计中我们为什么需要设计动效 gcq511120594 UI linux
随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。一、加强体验舒适度嗯，就是让用户更加爽更加爽的用
JBOSS服务部署端口冲突问题 HogwartsRow java 应用服务器 jboss server EJB3
服务端口冲突问题的解决方法，一般修改如下三个文件中的部分端口就可以了。 1、jboss5/server/default/conf/bindingservice.beans/META-INF/bindings-jboss-beans.xml 2、./server/default/deploy/jbossweb.sar/server.xml 3、.
第三章 Redis/SSDB+Twemproxy安装与使用 jinnianshilongnian ssdb reids twemproxy
目前对于互联网公司不使用Redis的很少，Redis不仅仅可以作为key-value缓存，而且提供了丰富的数据结果如set、list、map等，可以实现很多复杂的功能；但是Redis本身主要用作内存缓存，不适合做持久化存储，因此目前有如SSDB、ARDB等，还有如京东的JIMDB，它们都支持Redis协议，可以支持Redis客户端直接访问；而这些持久化存储大多数使用了如LevelDB、RocksD
ZooKeeper原理及使用 liyonghui160com
ZooKeeper是Hadoop Ecosystem中非常重要的组件，它的主要功能是为分布式系统提供一致性协调(Coordination)服务，与之对应的Google的类似服务叫Chubby。今天这篇文章分为三个部分来介绍ZooKeeper，第一部分介绍ZooKeeper的基本原理，第二部分介绍ZooKeeper
程序员解决问题的60个策略 pda158 框架工作单元测试
根本的指导方针 1. 首先写代码的时候最好不要有缺陷。最好的修复方法就是让 bug 胎死腹中。良好的单元测试强制数据库约束使用输入验证框架避免未实现的“else”条件在应用到主程序之前知道如何在孤立的情况下使用日志 2. print 语句。往往额外输出个一两行将有助于隔离问题。 3. 切换至详细的日志记录。详细的日
Create the Google Play Account sillycat Google
Create the Google Play Account Having a Google account, pay 25$, then you get your google developer account. References: http://developer.android.com/distribute/googleplay/start.html https://p
JSP三大指令 vikingwei jsp
JSP三大指令一个jsp页面中，可以有0~N个指令的定义！ 1. page --> 最复杂：<%@page language="java" info="xxx"...%> * pageEncoding和contentType： > pageEncoding：它