打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(2)：后台路由，导航，首页，退出登录

其他 2018-08-12 13:17:56 阅读次数: 0

打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(2)：后台路由，导航，首页，退出登录

第二章 建议学习时间8小时      总项目预计10章

学习方式：详细阅读，并手动实现相关代码（如果没有node和vue基础，请学习前面的vue和node基础博客【共10章】

演示地址：后台：demoback.lalalaweb.com  前台：demo.lalalaweb.com

演示过程中可能会发现bug，希望即时留言反馈，谢谢

源码下载：https://github.com/sutianbinde/classweb               //不是全部的代码，每次更新博客才更新代码

学习目标：此教程将教会大家 如何一步一步实现一个完整的课程学习系统（包括课程管理后台/Node服务器/学习门户三个模块）。

上次node基础课程博客大家反响很好，时隔3个月，才更新项目部分，预计2~3天更新一章，我尽量20天更新完毕，学完这个项目Nodejs和vue就基本熟悉了，如发现教程有误的地方，请及时留言反馈

视频教程地址：www.lalalaweb.com，后期会上传教学视频，大家可前往视频学习（暂时还没有视频）

首页导航 路由配置

 上一篇博客中，我们已经实现了登录功能，那么接着我就需要写登录完成后跳转的页面

我们先把项目运行起来  Node端 npm start ，vue端npm run dev

首先我们需要使用一个字体图标库 fontawesome，如果没有用过的自行百度啊，这里就不扯其他知识了

下载地址：http://fontawesome.dashgame.com/    或者 到github下载的本项目中对应路径去找也可以

下载好以后把css和font放到static中，然后我们在index.html中引入

    <link rel="stylesheet" type="text/css" href="../static/css/font-awesome.min.css"/>

注：1。我没有找到可以通过import引入的fontawesome包，所以就直接引入文件了，（网上有 vue-awesome，但貌似不好用，就没有用）

这里为什么是 ../static  这样去找static，而不是 ./   ，因为当进入二级路由以后，在路由内部index和static就不在被认为是同一级，就找不到了，所以就通过  ../往上再找了一级。

我们要设置一些统一的全局样式，我们就直接写在 index.html中，这里本来不是一次就写完这些样式，但为了避免以后再回来添加样式，这里就一起写了，首先清楚了全局的margin等，然后定义了 .btn按钮样式   .myinput输入框样式，以后再使用

复制代码 
<style>
        *{
                margin: 0;
                padding: 0;
            }
            body{
                font-size: 14px;
                font-family: arial "microsoft yahei";
                background: #f0f2f5;
            }
            ul,li{
                list-style: none;
            }
            /*按钮*/
            .btn{
                border:1px solid #4187db;
                color: #4187db;
                background: #fff;
                padding: 6px 14px 7px;
                border-radius: 3px;
                transition: all 0.5s ease;
                outline: none;
                margin-top: 14px;
                cursor: pointer;
            }
            .btn i{
                margin-right: 4px;
            }
            .btn:hover{
                background: #4187db;
                color: #fff;
            }
        
            /*输入框*/
            .myinput{
                width: 65%;
                border: 1px solid #cad3de;
                height: 35px;
                line-height: 35px;
                margin: 5px 0 10px;
                border-radius: 3px;
                padding: 0 10px;
                outline: none;
                box-sizing: border-box;
            }
            .myinput:focus{
                border: 1px solid #4289dc;
            }
    </style>
复制代码


在assets文件夹中创建 images文件夹，放入我们backIndex.vue中需要的图片  （图片请到github下载的项目中对应路径去找）

然后我们去修改 路由文件 index.js的路由，在其中添加后台首页框架的路由，如下图

 并且在components中创建 backIndex.vue组件

 

在backIndex.vue组件中写入后面代码

基本功能如下图，左侧导航，顶部搜索栏和个人头像 退出等操作

代码解释：中间大部分是Html+css代码，代码中注释已经可以帮助大家理解

这里着重说一下路由部分：router-link表示点击的时候url需要跳转的地址，这些地址对应的路由文件还没有写，这里先写上，下下步就配置这个，页面不多，我们就完成 首页 用户/学员管理 课程列表/课程编辑  几个页面，这样就可以算是一个基础版的后台管理系统了。

当点击对应的link的时候，vue内部会自动添加router-link-active 类，我们css中对这个类做了样式设置。

复制代码 
<template>
  <div class="backlogin">
    <div class="header">
            <div class="search_box" :class="{search_box_fouce:search_box_fouce}">
                <i class="fa fa-search" aria-hidden="true"></i>
                <input @focus="focusFn" @blur="blurFn" type="text" name="" id="" value="" placeholder="搜索 . . . " />
            </div>
            <div class="handler">
                <div class="more" @click="toggleSlide">
                    <i class="fa fa-bars" aria-hidden="true"></i>
                    <ul :class="{showul:showExit}">
                        <li><a href="javascript:;" @click="logout"><i class="fa fa-sign-out" aria-hidden="true"></i>退出</a></li>
                        <li><a href="javascript:;" @click="">修改密码</a></li>
                        <li><a href="javascript:;">意见反馈</a></li>
                    </ul>
                </div>
                <img src="../assets/images/teacherimg01.png" alt="" />
            </div>
        </div>
        
        <!--侧面导航-->
        <div class="sidenav_box">
            <img class="logo" src="../assets/images/logo03.png" alt="" />
            <ul class="sidenav">
                <li class="now">
                    <router-link to="/backIndex/indexContent">
                        <i class="fa fa-home" aria-hidden="true"></i>
                        <span>网站首页</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/backIndex/adminList">
                        <i class="fa fa-user-o" aria-hidden="true"></i>
                        <span>后台人员</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/backIndex/studentList">
                        <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                        <span>学员管理</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/backIndex/courseList">
                        <i class="fa fa-book" aria-hidden="true"></i>
                        <span>课程管理</span>
                    </router-link>
                </li>
            </ul>
        </div>
        
        <div class="content">
            
            <ul class="breadcrumb">
                <li><a href="#/backIndex/">首页</a></li>
                <li>{{pageTitle}}</li>
            </ul>
            <router-view></router-view>
            
        </div>
        
  </div>
</template>

<script>
    var pageTitleObj = {
        indexContent:"网站首页",
        adminList:"后台人员",
        studentList:"学员管理",
        courseList:"课程管理",
        courseEdit:"课程编辑"
    };
    
    export default {
      name: 'backlogin',
      data () {
        return {
                    search_box_fouce:false,
                    showExit:false,
                    pageTitle: pageTitleObj[ this.$route.path.substr( this.$route.path.lastIndexOf("/")+1 ) ] || "网站首页"
        }
      },
      methods:{
            focusFn(){  //搜索框获取焦点，添加class
                this.search_box_fouce = true;
            },
            blurFn(){   //搜索框失去焦点，去掉class
                this.search_box_fouce = false;
            },
            toggleSlide(){ //这个是用来显示和隐藏头像旁的退出下拉框
                this.showExit = !this.showExit
            },
            logout(){ //退出系统
                
            }
        },
        watch:{ //监控路径变化  当路径发送变化的时候，改变面包屑导航的显示
            $route: {
                handler: function (val, oldVal) {
                    var path = val.path;
                    this.pageTitle = pageTitleObj[ path.substr( path.lastIndexOf("/")+1 ) ] || "网站首页";
                }
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    ul, li{
        list-style: none;
    }
    .header{
        height: 60px;
        box-shadow: 0 1px 5px rgba(13,62,73,0.2) ;
        background: #fff;
        margin-left: 80px;
        min-width: 740px;
    }
    
    .sidenav_box{
        width: 80px;
        box-shadow: 0 1px 5px rgba(13,62,73,0.2) ;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        background: #fff;
        z-index: 99;
    }
    .sidenav_box .logo{
        width: 46px;
        margin: 20px 0 0 17px;
    }
    .sidenav{
        margin-top: 30px;
    }
    .sidenav li{
        margin-bottom: 20px;
    }
    .sidenav a{
        display: block;
        width: 56px;
        height: 56px;
        margin: 0 auto;
        position: relative;
        cursor: pointer;
        opacity: 0.6;
        transition:all 0.5s ease;
        text-decoration: none;
    }
    .sidenav a i{
        font-size: 20px;
        line-height: 56px;
        text-align: center;
        display: block;
        color: #566a80;
    }
    .sidenav a:hover{
        background: #f0f2f5;
        opacity: 1;
    }
    .sidenav a span{
        position: absolute;
        left: 55px;
        top: 22px;
        background: #000;
        color: #fff;
        width: 0px;
        padding: 5px 0;
        border-radius: 3px;
        font-size: 12px;
        opacity: 0;
    }
    .sidenav a:hover span{
        opacity: 1;
        left: 65px;    
        width: 60px;
        padding: 5px 20px;
        transition:none 0.5s ease-out;
        transition-property: opacity,left;
    }
    .sidenav a span:after{
        content: "";
        position: absolute;
        top: 8px;
        left: -10px;
        border:5px solid transparent;
        border-right-color: #000;
    }
    .sidenav .router-link-active:after{
        content: "";
        position: absolute;
        left: -16px;
        top: 8px;
        height: 40px;
        width: 8px;
        border-radius: 3px;
        background: #566a80;
    }
    .sidenav .router-link-active{
        opacity: 1;
        background: #f0f2f5;
    }
    
    /*顶部栏*/
    .search_box{
        color: #979fa8;
        padding-top: 20px;
        float: left;
    }
    .search_box i{
        margin: 0 12px 0 70px;
        transition: all 0.5s ease;
    }
    .search_box input{
        border:none;
        outline: none;
    }
    .search_box_fouce i{
        margin-left: 55px;
        color: #2C3D50;
    }
    
    .handler > *{
        float: right;
        margin-right: 20px;
        cursor: pointer;
    }
    .handler .more{
        font-size: 20px;
        color: #566A80;
        margin: 15px 30px 0 0;
        position: relative;
    }
    .handler .more:hover{
        color: #2C3D50;
    }
    .handler .more ul{
        font-size: 14px;
        position: absolute;
        right: 0;
        top: 55px;
        width: 120px;
        box-shadow: 0 1px 5px rgba(13,62,73,0.2);
        transition: all 0.3s ease-out;
        height: 0;
        opacity: 0;
        overflow: hidden;
        text-align: center;
    }
    .handler .more .showul{
        height: auto;
        top: 45px;
        opacity: 1;
        border-top: 1px solid #979FA8;
    }
    .handler .more a{
        display: block;
        padding: 8px 10px;
        background: #fff;
        color: #566A80;
        text-decoration: none;
    }
    .handler .more a:hover{
        background: #f8f9fb;
    }
    .handler > img{
        width: 50px;
        border-radius: 50%;
        margin-top: 5px;
        margin-right: 30px;
    }
    
    .content{
        margin: 20px 30px 0px 100px;
        min-height: 300px;
        min-width: 700px;
    }
    
    .breadcrumb{
        border-radius: 4px;
        padding: 10px 15px;
        background: #fff;
    }
    .breadcrumb > li{
        display: inline-block;
        color: #777777;
    }
    .breadcrumb > li+li:before{
        padding: 0 5px;
        color: #ccc;
        content: "/\00a0";
    }
    .breadcrumb > li > a{
        color: #32475f;
        text-decoration: none;
    }
    .main{
        border-radius: 4px;
        background: #fff;
        margin-top: 10px;
    }
    
    
    
</style>
复制代码

然后在地址栏输入 http://localhost:8080/#/backIndex  就可以看到首页框架的效果了。  （这时候内部页面还没有，所以点击左侧导航会找不到页面，先不要点）

常见错误：  如果前面的图片路径没放对，就会出现这个错误

 然后我们继续将所有的路由配置其他页面的路由

一共有 课程列表 / 编辑课程 / 首页统计 /  后台用户  / 学员用户  这些二级页面，我们都加入到  路由文件  index.js中

复制代码 
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/login'
import backIndex from '@/components/backIndex'
import courseList from '@/components/courseList'
import indexContent from '@/components/indexContent'
import adminList from '@/components/adminList'
import studentList from '@/components/studentList'
import courseEdit from '@/components/courseEdit'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },{
        path: '/backIndex', //首页框架
        name: 'backIndex',
        component: backIndex,
        children:[
            {
              path: 'courseList', //课程列表
                component: courseList
            },{
              path: 'courseEdit/:sysId', //编辑课程
                component: courseEdit
            },{
              path: 'indexContent', //首页统计
                component: indexContent
            },{
              path: 'adminList', //后台用户
                component: adminList
            },{
              path: 'studentList', //学员用户
                component: studentList
            },{
               path: '*',           //其他路径都跳转到首页
                redirect: 'indexContent'
            }
        ]
        }
  ]
})
复制代码

添加这些路由后的需要建立对应的 vue 组件文件，在componets中建立上面路由对应的空vue文件

这些新建的vue文件中需要先放入一个空的template标签，以免报错

<template>
</template>

 再刷新页面的时候，左侧导航就可以点击了（这些router-link对应的路径和路由对应的path一致），可以看到面包屑导航对应的名字就修改了（这个修改的逻辑在backIndex.vue的97行左右的 watch方法中）。

首页统计页面

然后我们为 indexContent.vue 添加中间显示的统计图表，代码在后面

代码如下：由于前台页面的统计还没开始写，当下我们就只放一个静态页面在此，

canvas绘制提标使用的是原生js写的，具体的原理步骤请查看我以前的博客  http://www.cnblogs.com/chengduxiaoc/p/7678967.html

复制代码 
<template>
  <div class="indexContent main">
    <h4>最新数据</h4>
    <ul class="number">
            <li>
                <div class="title">今日访问</div>
                <p>12000</p>
                <a href="javascript:;">查看详情<i class="fa fa-angle-right" aria-hidden="true"></i></a>
            </li>
            <li>
                <div class="title">学员总数</div>
                <p>3000000</p>
                <a href="javascript:;">查看详情<i class="fa fa-angle-right" aria-hidden="true"></i></a>
            </li>
            <li>
                <div class="title">在学人数</div>
                <p>2000</p>
                <a href="javascript:;">查看详情<i class="fa fa-angle-right" aria-hidden="true"></i></a>
            </li>
        </ul>
    <canvas id="barChart" height="400" width="600" style="margin:10px 0"> 你的浏览器不支持HTML5 canvas </canvas>
        
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .main{
        border-radius: 4px;
        background: #fff;
        margin-top: 10px;
        overflow: hidden;
    }
    .main > h4{
        color: #51555a;
    padding:10px;
    border-bottom: 1px solid #DFE3EA;
    }
    .number{
        width: 30%;
        float: right;
        margin-right: 10%;
        margin-top: 10px;
        color: #566A80;
    }
    .number li{
        padding: 20px;
        border-top:1px solid #F0F2F5;
    }
    .number li:first-child{
        border: none 0;
    }
    .number p{
        font-size: 20px;
        font-family: arial;
        margin: 10px 0;
    }
    .number a{
        text-decoration: none;
        color: #4187db;
        font-size: 12px;
    }
    .number li:hover{
        color: #173859;
    }
    .number a:hover{
        
    }
    .number i{
        transition: all 0.3s ease-out;
        padding-left: 10px;
    }
    .number a:hover i{
        padding-left: 20px;
    }
    .number:hover li{
        border-color:#DFE3EA
    }
    canvas{
        max-width: 55%;
        min-width: 45%;
    }
</style>

<script>

    export default {
      name: 'indexContent',
      data () {
        return {

        }
      },
      methods:{
        },
        mounted:function(){
            var chartData = [["2017/01", 50], ["2017/02", 60], ["2017/03", 100], ["2017/04",200], ["2017/05",350], ["2017/06",600]];
            goBarChart(chartData);
            
        }
    }
    
    function goBarChart(dataArr){
        
        
    // 声明所需变量
    var canvas,ctx;
    // 图表属性
    var cWidth, cHeight, cMargin, cSpace;
    var originX, originY;
    // 折线图属性
    var tobalDots, dotSpace, maxValue;
    var totalYNomber;
    // 运动相关变量
    var ctr, numctr, speed;

    // 获得canvas上下文
    canvas = document.getElementById("barChart");
    if(canvas && canvas.getContext){
        ctx = canvas.getContext("2d");
    }
    initChart(); // 图表初始化
    drawLineLabelMarkers(); // 绘制图表轴、标签和标记
    drawBarAnimate(); // 绘制折线图的动画

    //点击刷新图表
    canvas.onclick = function(){
        initChart(); // 图表初始化
        drawLineLabelMarkers(); // 绘制图表轴、标签和标记
        drawBarAnimate(); // 绘制折线图的动画
    };

    // 图表初始化
    function initChart(){
        // 图表信息
        cMargin = 60;
        cSpace = 80;
        canvas.width = Math.floor( (window.innerWidth-100)/2 ) * 2 ;
        canvas.height = 740;
        canvas.style.height = canvas.height/2 + "px";
        canvas.style.width = canvas.width/2 + "px";
        cHeight = canvas.height - cMargin - cSpace;
        cWidth = canvas.width - cMargin - cSpace;
        originX = cMargin + cSpace;
        originY = cMargin + cHeight;

        // 折线图信息
        tobalDots = dataArr.length;
        dotSpace = parseInt( cWidth/tobalDots );
        maxValue = 0;
        for(var i=0; i<dataArr.length; i++){
            var dotVal = parseInt( dataArr[i][1] );
            if( dotVal > maxValue ){
                maxValue = dotVal;
            }
        }
        maxValue += 50;
        totalYNomber = 10;
        // 运动相关
        ctr = 1;
        numctr = 100;
        speed = 6;

        ctx.translate(0.5,0.5);  // 当只绘制1像素的线的时候，坐标点需要偏移，这样才能画出1像素实线
    }

    // 绘制图表轴、标签和标记
    function drawLineLabelMarkers(){
        ctx.font = "24px Arial";
        ctx.lineWidth = 2;
        ctx.fillStyle = "#566a80";
        ctx.strokeStyle = "#566a80";
        // y轴
        drawLine(originX, originY, originX, cMargin);
        // x轴
        drawLine(originX, originY, originX+cWidth, originY);

        // 绘制标记
        drawMarkers();
    }

    // 画线的方法
    function drawLine(x, y, X, Y){
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(X, Y);
        ctx.stroke();
        ctx.closePath();
    }

    // 绘制标记
    function drawMarkers(){
        ctx.strokeStyle = "#E0E0E0";
        // 绘制 y 轴 及中间横线
        var oneVal = parseInt(maxValue/totalYNomber);
        ctx.textAlign = "right";
        for(var i=0; i<=totalYNomber; i++){
            var markerVal =  i*oneVal;
            var xMarker = originX-5;
            var yMarker = parseInt( cHeight*(1-markerVal/maxValue) ) + cMargin;
            //console.log(xMarker, yMarker+3,markerVal/maxValue,originY);
            ctx.fillText(markerVal, xMarker, yMarker+3, cSpace); // 文字
            if(i>0){
                drawLine(originX+2, yMarker, originX+cWidth, yMarker);
            }
        }
        // 绘制 x 轴 及中间竖线
        ctx.textAlign = "center";
        for(var i=0; i<tobalDots; i++){
            var markerVal = dataArr[i][0];
            var xMarker = originX+i*dotSpace;
            var yMarker = originY+30;
            ctx.fillText(markerVal, xMarker, yMarker, cSpace); // 文字
            if(i>0){
                drawLine(xMarker, originY-2, xMarker, cMargin    );
            }
        }
        // 绘制标题 y
        ctx.save();
        ctx.rotate(-Math.PI/2);
        ctx.fillText("访问量", -canvas.height/2, cSpace-10);
        ctx.restore();
        // 绘制标题 x
        ctx.fillText("月份", originX+cWidth/2, originY+cSpace/2+20);
    };

    //绘制折线图
    function drawBarAnimate(){
        ctx.strokeStyle = "#566a80";  //"#49FE79";

        //连线
        ctx.beginPath();
        for(var i=0; i<tobalDots; i++){
            var dotVal = dataArr[i][1];
            var barH = parseInt( cHeight*dotVal/maxValue* ctr/numctr );//
            var y = originY - barH;
            var x = originX + dotSpace*i;
            if(i==0){
                ctx.moveTo( x, y );
            }else{
                ctx.lineTo( x, y );
            }
        }
        ctx.stroke();

        //背景
        ctx.lineTo( originX+dotSpace*(tobalDots-1), originY);
        ctx.lineTo( originX, originY);
        //背景渐变色
        //柱状图渐变色
        var gradient = ctx.createLinearGradient(0, 0, 0, 300);
        gradient.addColorStop(0, 'rgba(133,171,212,0.6)');
        gradient.addColorStop(1, 'rgba(133,171,212,0.1)');
        ctx.fillStyle = gradient;
        ctx.fill();
        ctx.closePath();
        ctx.fillStyle = "#566a80";

        //绘制点
        for(var i=0; i<tobalDots; i++){
            var dotVal = dataArr[i][1];
            var barH = parseInt( cHeight*dotVal/maxValue * ctr/numctr );
            var y = originY - barH;
            var x = originX + dotSpace*i;
            drawArc( x, y );  //绘制点
            ctx.fillText(parseInt(dotVal*ctr/numctr), x+15, y-8); // 文字
        }

        if(ctr<numctr){
            ctr++;
            setTimeout(function(){
                ctx.clearRect(0,0,canvas.width, canvas.height);
                drawLineLabelMarkers();
                drawBarAnimate();
            }, speed);
        }
    }

    //绘制圆点
    function drawArc( x, y, X, Y ){
        ctx.beginPath();
        ctx.arc( x, y, 3, 0, Math.PI*2 );
        ctx.fill();
        ctx.closePath();
    }


    }

</script>
复制代码

 然后我们可以看到，首页的效果就出来啦

 登录功能完善：

当登录请求完成以后，如果出错，就弹出错误（我们本项目没有封装模态框，就直接用alert吧），如果正确，就跳转到首页

修改后的 login.vue中的 ajax请求代码如下：

复制代码 
this.$reqs.post("/users/login",{
                        username:this.username,
                        password:this.password
                }).then(function(result){ 
                    //成功
                    if(result.data.err){
                        alert(result.data.err);
                    }else{
                        _this.$router.push({path:'/backIndex/indexContent'});
                    }
                    _this.disablebtn = false;
                    _this.loginText = "登录";
                    
                }).catch(function (error) {
                    //失败
                    _this.disablebtn = false;
                    _this.loginText = "登录"
                });
复制代码

注：我们通过  router.push去修改url，作用和原生js的  window.location.href基本一致。

退出系统

 功能点：点击退出，实现退出功能

在backIndex.vue中我们有一个退出登录的空方法，我们在里面写退出登录的请求的代码，退出成功后跳转到根目录（以就算登录页面）

复制代码 
            logout(){ //退出系统
                var _this = this;
                this.$reqs.post("/users/logout",{
                    
                }).then(function(result){
                    //成功
                    _this.$router.push({path:'/'});
                }).catch(function (error) {
                    //失败
                console.log(error)
              });
            }
复制代码

然后在后台写接口，在user.js中 登录的方法后面写（修改完成后需要重启node服务）

注：这里直接清除登录中设置的 session 就可以了，（我们后面会对所有的请求设置拦截，如果session中的用户信息没有，再提示用户未登录，跳转到登录页面就可以了）

复制代码 
//退出
router.post('/logout', function(req, res, next) {
    
    req.session.username = ""; //清除session
    req.session.password = "";
    res.end('{"success":"true"}');
});
复制代码

到此，我们就实现了登录，显示首页，退出的基本功能

好啦，今天就讲到这里。下一篇将讲解 用户添加/修改/删除，表格分页

猜你喜欢

转载自blog.csdn.net/weixin_39717076/article/details/80851732
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
周排行
购置笔记本常识
从源码看Spring Security之采坑笔记（Spring Boot篇）
大数据学习——高可用配置案例
如何避免选择不专业的建站公司?
Euclid's Game HDU - 1525（博弈）
面试笔记（六）---Js实现eventHandler
Windows 实例搭建的 FTP 在外网无法连接和访问
设计模式 : 桥接模式
USB 设备驱动开发之几个重要结构体分析
14-p14_sqrt求平方根
每日归档
更多
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022