weixin_42066711
weixin_42066711

前端框架AdminLTE

作为CMDB资产管理项目，必须有一个丰富、直观、酷炫的前端页面。

适合运维平台的前端框架有很多，开源的也不少，这里选用的是AdminLTE。

AdminLTE

AdminLTE托管在GitHub上，可以通过下面的地址下载：

https://github.com/almasaeed2010/AdminLTE/releases

AdminLTE自带JQuery和Bootstrap3框架，无需另外下载。

AdminLTE自带多种配色皮肤，可根据需要实时调整。

AdminLTE是移动端自适应的，无需单独考虑。

AdminLTE自带大量插件，比如表格、Charts等等，可根据需要载入。

但是AdminLTE的源文件包内，缺少font-awesome-4.6.3和ionicons-2.0.1这两个图标插件，它是通过CDN的形式加载的，如果网络不太好，加载可能比较困难或者缓慢，最好用本地静态文件的形式。教程在Github的包内附带上了这两个插件，可以直接使用，当然你自己下载安装也行。

一、创建base.html

AdminLTE源文件包里有个index.html页面文件，可以利用它修改出我们CMDB项目需要的基本框架。

在项目的根目录cmdb下新建static目录，在settings文件中添加下面的配置：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

为了以后扩展的方便，将AdminLTE源文件包里的bootstrap、dist和plugins三个文件夹，全部拷贝到 static目录中，这样做的话文件会比较大，比较多，但可以防止出现引用文件找不到、插件缺失等情况的发生，等以后对AdminLTE非常熟悉了，可以对static中无用的文件进行删减。

在cmdb根目录下的templates目录下，新建base.html文件，将AdminLTE源文件包中的index.html中的内容拷贝过去。然后，根据我们项目的具体情况修改文件引用、页面框架、title、CSS、主体和script块。nainaitea.com

{% load staticfiles %}

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>{% block title %}主页{% endblock %}title>
  
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  
  <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
  
  <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.6.3/css/font-awesome.min.css' %}">
  
  <link rel="stylesheet" href="{% static 'plugins/ionicons-2.0.1/css/ionicons.min.css' %}">
  
  
  

  {% block css %}{% endblock %}

head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <header class="main-header">
    
    <a href="#" class="logo">
      
      <span class="logo-mini">CDspan>
      
      <span class="logo-lg"><b>CMDBb>span>
    a>
    
    <nav class="navbar navbar-static-top">
      
      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">Toggle navigationspan>
      a>

      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          
          <li class="dropdown messages-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-envelope-o">i>
              <span class="label label-success">4span>
            a>
            <ul class="dropdown-menu">
              <li class="header">此功能暂缺li>
            ul>
          li>
          
          <li class="dropdown notifications-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-bell-o">i>
              <span class="label label-warning">10span>
            a>
            <ul class="dropdown-menu">
              <li class="header">此功能暂缺li>
            ul>
          li>
          
          <li class="dropdown tasks-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-flag-o">i>
              <span class="label label-danger">9span>
            a>
            <ul class="dropdown-menu">
              <li class="header">此功能暂缺li>
            ul>
          li>
          
          <li class="dropdown user user-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <img src="{% static 'dist/img/user2-160x160.jpg' %}" class="user-image" alt="User Image">
              <span class="hidden-xs">管理员span>
            a>
          li>
          
        ul>
      div>
    nav>
  header>
  
  <aside class="main-sidebar">
    
    <section class="sidebar">
      
      <div class="user-panel">
        <div class="pull-left image">
          <img src="{% static 'dist/img/user2-160x160.jpg' %}" class="img-circle" alt="User Image">
        div>
        <div class="pull-left info">
          <p>Adminp>
          <a href="#"><i class="fa fa-circle text-success">i> Onlinea>
        div>
      div>
      
      <form action="#" method="get" class="sidebar-form">
        <div class="input-group">
          <input type="text" name="q" class="form-control" placeholder="Search...">
              <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search">i>
                button>
              span>
        div>
      form>
      
      
      <ul class="sidebar-menu">
        <li class="header">导航栏li>
        <li class="active treeview">
          <a href="/assets/dashboard/">
            <i class="fa fa-dashboard">i> <span>仪表盘span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right">i>
            span>
          a>
        li>
        <li class="treeview">
          <a href="/assets/index/">
            <i class="fa fa-table">i> <span>资产总表span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right">i>
            span>
          a>
        li>
      ul>
    section>
    
  aside>

  
  <div class="content-wrapper">

      {#        主体内容全放到这里！#}
      {% block content %}{% endblock %}

  div>
  
  <footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>Versionb> 1.0.0
    div>
    <strong>Copyright © 2017- <a href="http://www.liujiangblog.com" target="_blank">刘江的博客和教程a>.strong> All rights
    reserved.
  footer>


div>



<script src="{% static 'plugins/jQuery/jquery-2.2.3.min.js' %}">script>

<script src="{% static 'plugins/jQueryUI/jquery-ui.min.js' %}">script>

<script>
  $.widget.bridge('uibutton', $.ui.button);
script>

<script src="{% static 'bootstrap/js/bootstrap.min.js' %}">script>

{% block script %}{% endblock %}

body>
html>

这是一个适合当前CMDB的精简版本。在Github中，还提供了一个全功能的版本base-backup.html，方便大家扩展修改。

二、创建路由、视图

这里设计了三个视图和页面，分别是：

  • dashboard：仪表盘，图形化的数据展示
  • index：资产总表，表格的形式展示资产信息
  • detail：单个资产的详细信息页面

将assets/urls.py修改成下面的样子：

#!/usr/bin/env python
# -*- coding:utf-8 -*-

from django.conf.urls import url
from assets import views

app_name = 'assets'

urlpatterns = [
    url(r'^report/', views.report, name='report'),
    url(r'^dashboard/', views.dashboard, name='dashboard'),
    url(r'^index/', views.index, name='index'),
    url(r'^detail/(?P[0-9]+)/$', views.detail, name="detail"),
    url(r'^$', views.dashboard),
]

在assets/views.py中，增加下面三个视图：

from django.shortcuts import get_object_or_404

def index(request):

    assets = models.Asset.objects.all()
    return render(request, 'assets/index.html', locals())


def dashboard(request):
    pass
    return render(request, 'assets/dashboard.html', locals())


def detail(request, asset_id):
    """
    以显示服务器类型资产详细为例，安全设备、存储设备、网络设备等参照此例。
    :param request:
    :param asset_id:
    :return:
    """
    asset = get_object_or_404(models.Asset, id=asset_id)
    return render(request, 'assets/detail.html', locals())

注意需要提前from django.shortcuts import get_object_or_404导入get_object_or_404()方法，这是一个非常常用的内置方法。

三、创建模版

1.dashboard.html

在assets目录下创建templates/assets/dashboard.html文件，写入下面的代码：

{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}仪表盘{% endblock %}

{% block css %}

  
   rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
  
   rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}">

{% endblock %}


{% block content %}
    
     class="content-header">
      

        仪表盘
        dashboard
      

       class="breadcrumb">
        
  •  href="#"> class="fa fa-dashboard"> 主页
    • 
         class="active">仪表盘
      
    

{% endblock %}

{% block script %}
    
    
     src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}">
     src="{% static 'plugins/fastclick/fastclick.js' %}">
    
     src="{% static 'dist/js/app.min.js' %}">
    
     src="{% static 'dist/js/demo.js' %}">
     src="{% static 'plugins/knob/jquery.knob.js' %}">
    
{% endblock %}

    2.index.html

    在assets目录下创建templates/assets/index.html文件，写入下面的代码：

    {% extends 'base.html' %}
{% load staticfiles %}
{% block title %}资产总表{% endblock %}

{% block css %}


  <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
  
  <link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
  
  <link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}">

{% endblock %}

{% block content %}

    
    <section class="content-header">
      <h1>
        资产总表
        <small>assets listsmall>
      h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard">i> 主页a>li>
        <li class="active">资产总表li>
      ol>
    section>

{% endblock %}

{% block script %}
    
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}">script>
    <script src="{% static 'plugins/datatables/dataTables.bootstrap.min.js' %}">script>
    
    <script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}">script>
    
    <script src="{% static 'plugins/fastclick/fastclick.js' %}">script>
    
    <script src="{% static 'dist/js/app.min.js' %}">script>
    
    <script src="{% static 'dist/js/demo.js' %}">script>
    
{% endblock %}

    3.detail.html

    在assets目录下创建templates/assets/detail.html文件，写入下面的代码：

    {% extends 'base.html' %}
{% load staticfiles %}
{% block title %}资产详细{% endblock %}
{% block css %}

  
  <link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
  
  <link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}">

{% endblock %}

{% block content %}

    
    <section class="content-header">
      <h1>
        资产详细
        <small>asset infosmall>
      h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard">i> 主页a>li>
        <li>资产总表li>
        <li class="active">资产详细li>
      ol>
    section>

{% endblock %}

{% block script %}
    
    <script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}">script>
    
    <script src="{% static 'plugins/fastclick/fastclick.js' %}">script>
    
    <script src="{% static 'dist/js/app.min.js' %}">script>
    
    <script src="{% static 'dist/js/demo.js' %}">script>
    
{% endblock %}

    以上三个模板都很简单，就是下面的流程：

    • extends继承‘base.html’；
    • {% load staticfiles %}载入静态文件；
    • {% block title %}资产详细{% endblock %}，定制title;
    • {% block css %}，载入当前页面的专用CSS文件；
    • {% block script %}，载入当前页面的专用js文件；
    • 最后在{% block content %}中，编写一个当前页面的面包屑导航；
    • 页面的主体内容在后面的章节进行充实。

    四、访问页面

    重启CMDB服务器，访问http://192.168.1.100:8000/assets/dashboard/，可以看到下面的页面。

    前端框架AdminLTE_第1张图片

    如果你的配色和我的不一样，没关系，都可以调整的。

    你可能感兴趣的:(前端框架AdminLTE)

    • 【商城系统技术选型】 启山智软 商城 源码 微信小程序小程序java
      商城系统技术选型是一个复杂但至关重要的过程，它直接关系到商城系统的性能、可扩展性、安全性以及用户体验等多个方面。以下是一些关键的技术选型考虑因素：前端技术选型框架选择：React或Vue.js等流行前端框架是不错的选择，它们具有良好的可组件化和可重用性，且社区资源丰富，有大量的插件和工具可供使用，能提高开发效率和界面的交互性。响应式设计：确保系统能自适应不同设备屏幕，如手机、平板、电脑等，提供一致
    • Vue.js结合ASP.NET Core构建用户登录与权限验证系统 眸笑丶 Vuec#npmvue.js
      1.环境准备2.创建项目3.Vue配置步骤一:安装包步骤二:配置文件步骤三:页面文件4.后台配置在本教程中，我将利用VisualStudio2022的强大集成开发环境，结合Vue.js前端框架和ASP.NETCore后端框架，从头开始创建一个具备用户登录与权限验证功能的Web应用程序。我们将充分利用VisualStudio的内置工具和模板来简化开发流程。1.环境准备VisualStudio2022
    • 多商户商城系统会用的技术有哪些 hunzi_1 uni-appjavaphp
      前端技术HTML/CSS：超文本标记语言（HTML）用于构建页面的结构，层叠样式表（CSS）负责页面的样式设计，它们共同决定了商城系统的页面展示效果，包括商品展示、店铺页面、用户界面等的布局和外观。JavaScript：是一种脚本语言，用于为网页添加动态效果和交互性，如实现菜单的展开与收缩、商品图片的轮播、用户操作的响应等。Vue.js/React：流行的前端框架，能够帮助开发者更高效地构建复杂的
    • 分销商城一般会用到什么框架 hunzi_1 uni-appjavaphp
      前端框架Vue.js：特点：是一个渐进式的JavaScript框架，提供了简洁的语法和高效的数据绑定功能，使用组件化开发，使得代码的复用性和可维护性高。通过虚拟DOM实现高效的页面更新，能提升性能。适用场景：适用于构建交互性强、需要频繁更新数据的分销商城界面，如商品列表展示、购物车功能、用户订单状态的实时更新等。React.js：特点：以组件化开发为核心，拥有丰富的生态系统，包括大量的第三方组件和
    • 深入探索 Vue.js 组件开发中的最新技术：Teleport 和 Suspense 的使用 桂月二二 vue.js前端javascript
      Vue.js是一款广泛使用的前端框架，凭借其简洁的设计和强大的功能，已经成为了许多开发者首选的框架。随着Vue3的发布，新的特性和改进为开发者提供了更多的选择和灵活性。其中，Teleport和Suspense是Vue3引入的两项非常有趣和强大的技术，它们能够极大地提升应用的性能和用户体验。本篇博客将深入探讨Vue3中Teleport和Suspense的具体使用方法，介绍它们的应用场景，以及如何在实
    • TypeScript 学习笔记（七）：TypeScript 与后端框架的结合应用 Evaporator Core typescript前端框架学习
      1.引言在前几篇学习笔记中，我们已经探讨了TypeScript的基础知识和在前端框架（如Angular和React）中的应用。本篇将重点介绍TypeScript在后端开发中的应用，特别是如何与Node.js和Express结合使用，以构建强类型、可维护的后端应用。2.TypeScript与Node.jsNode.js是一个基于ChromeV8引擎的JavaScript运行时，广泛用于构建后端应用。
    • 大数据毕业设计—基于python+Django自然灾害频发地区情况数据分析系统 qq_1406299528 python计算机毕业设计python大数据课程设计
      一、项目技术开发语言：Pythonpython框架：Django软件版本：python3.7/python3.8数据库：mysql5.7或更高版本数据库工具：Navicat11开发软件：PyCharm/vscode前端框架:vue.js二、项目内容和项目介绍  1.项目内容  1.开发语言：该系统采用Python作为开发语言，Python具有优雅的语法和动态类型，以及解释型语言的本质，使其成为许多
    • Vue中常见设计模式的应用~ Warm vue.js设计模式前端
      Vue是基于什么模式？表示既然是Vue中常见的设计模式，首当其冲就先聊聊MVVM模式啦一、mvvm模式Vue.js是一个基于MVVM设计模式的前端框架。它将前端中的UI视图与底层数据和业务逻辑分离开来，使得UI视图与数据和业务逻辑之间不存在耦合性，可以独立编写和测试。MVVM三个组成部分Model(模型):存放业务数据和对数据的操作等View(视图):用户界面，负责呈现UI，并向ViewModel
    • 前端框架: Vue3组件设计模式 苹果酱0567 面试题汇总与解析课程设计springbootvue.jsjavamysql
      前端框架:Vue3组件设计模式在前端开发中，Vue框架一直受到开发者的喜爱。它不仅易于上手，而且功能丰富，尤其是在Vue3中引入了CompositionAPI和Teleport等新特性，进一步提升了开发体验。在Vue3中，组件设计模式是一个非常重要的话题，良好的组件设计模式可以提高代码的可维护性和可扩展性，本文将深入探讨Vue3组件设计模式的相关内容。一、组件化开发模式组件化概念及优势在前端开发中
    • 解决Spring+Vue的跨域问题 eqa11 springvue.jsjava
      文章目录解决Spring+Vue的跨域问题一、引言二、前端Vue配置代理解决跨域1、配置代理2、使用axios发送请求三、后端Spring配置解决跨域1、全局配置跨域策略四、使用示例五、总结解决Spring+Vue的跨域问题一、引言在前后端分离的开发模式中，Spring和Vue是常用的后端和前端框架。然而，在开发过程中，我们经常会遇到跨域问题，即浏览器出于安全考虑，限制了不同源之间的请求。本文将介
    • 小程序快速搭建线上预约线下陪玩伴游系统源码，打造便捷新体验
      一、技术选型前端框架：推荐使用uni-app框架进行开发，因其支持多平台（微信小程序、H5、APP等）的同步发布，能有效提高开发效率和用户体验。后端技术：可以选择PHP+MySQL等成熟的技术栈，确保系统的稳定性和数据处理能力。对于更复杂的需求，也可以考虑使用Java等后端开发语言，配合SpringBoot、SpringMVC等框架，提供全面的编程和配置模型。数据库：MySQL是常用的开源关系型数
    • 深入探究 Vue 3 中动态组件加载与性能优化 桂月二二 vue.js性能优化前端
      随着前端工程化的深入发展，Vue.js已成为最受欢迎的前端框架之一，其灵活性和生态系统丰富性让开发者爱不释手。然而，当我们开发中大型项目时，性能优化往往成为不得不面对的问题。在Vue3中，官方提供了动态组件加载与性能优化的支持，通过动态导入(DynamicImport)和Suspense组件的结合，我们可以更好地管理资源、减少初始加载时间，同时提升用户体验。这篇文章将详细讲解这项技术的使用方式及其
    • 2025最新的陪玩小程序系统有哪些开源架构?如何完全的实现安全交付？ D矜持 架构安全前端框架交友uniapp系统架构
      一、开源架构前端框架：*Uni-app等前端框架使得开发者能够创建跨平台的应用程序，这些应用程序在不同操作系统和设备上具有一致的用户体验。这些框架提供了丰富的组件和工具，使得开发者能够快速构建出美观、易用的用户界面。*通过这些前端框架，用户可以轻松地浏览陪玩师资料、下单、支付以及进行实时通信等操作，从而提高用户满意度和忠诚度。实时通信技术：*WebSocket实时通信技术实现了用户与陪玩师之间的即
    • 圈子交友app小程序公众号/圈子社群创建必须要注意的几个点
      技术选型与平台搭建技术选型：根据需求选择合适的开发技术和框架。例如，对于跨平台应用，可以考虑使用vue、uniapp等前端框架；后端则可以选择php等组合，以保证数据处理的效率和安全性。平台搭建：搭建稳定、易用、美观的App、小程序或公众号平台。注重用户体验，确保界面简洁、操作流畅。用户体验优化界面设计：注重UI/UX设计，确保界面美观、简洁、易用。这有助于提升用户的满意度和忠诚度。交互流程：优化
    • 【学术会议论文投稿】前端框架巅峰对决：React、Vue与Angular的全面解析与实战指南 小周不想卷 艾思科蓝学术会议投稿前端框架
      【JPCS独立出版】第三届能源与动力工程国际学术会议（EPE2024）_艾思科蓝_学术一站式服务平台更多学术会议请看：https://ais.cn/u/nuyAF3引言在快速发展的前端技术领域，选择合适的框架或库对于项目的成功至关重要。React、Vue和Angular作为当前最流行的三大前端框架/库，各自拥有独特的优势和适用场景。本文将通过深入的文字解析和代码讲解，帮助开发者理解这三者的差异，并
    • java ssm基于微信小程序的面向企事业单位的项目申报评审系统（源码+文档+运行视频+讲解视频） QQ2279239102 SSM微信小程序微信小程序javaSSM开发语言vue.js
      文章目录系列文章目录目的前言一、详细视频演示二、项目部分实现截图三、技术栈后端框架SSM前端框架vueSSM框架详细介绍系统测试微信小程序介绍四、代码参考源码获取目的摘要：基于JavaSSM与微信小程序的项目申报评审系统，针对企事业单位项目管理痛点，提供一站式解决方案，提升工作效率与透明度。申报单位在微信小程序端按模板填写项目信息，包括项目背景、目标、预算等详细资料，上传相关附件。系统自动校验格式
    • Svelte 最新官方文档翻译（3）—— 符文（Runes）上
      前言Svelte，一个非常“有趣”、用起来“很爽”的前端框架。从Svelte诞生之初，就备受开发者的喜爱，根据统计，从2019年到2024年，连续6年一直是开发者最感兴趣的前端框架No.1：Svelte以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级Web项目，也是我做个人项目的首选技术栈。目前Svelte基于Svelte5发布了最新的官方文档，但却缺少对应的中文
    • Vue.js：轻量高效的前端框架
      Vue.js是一个用于构建用户界面的渐进式JavaScript框架，因其轻量、灵活和易上手的特性备受欢迎。Vue.js不仅适合小型项目的快速开发，也可用于构建复杂的单页面应用（SPA）。本文将介绍Vue.js的核心特性、项目结构、常用功能及其在现代前端开发中的应用场景。一、Vue.js简介Vue.js（简称Vue）由尤雨溪于2014年推出，是一个专注于视图层的JavaScript框架。它采用渐进式
    • Svelte 5震撼发布，前端开发的新变革！ 前端程序员
      title:Svelte5震撼发布，前端开发的新变革！博主小程序体验|博主公众号分享亲爱的前端小伙伴们，大家好！Svelte5正式发布啦！这可是新一代的前端框架哦。就在10月22日，这个备受期待的版本终于和我们见面了。它带来了好多超棒的更新呢。首先，它是完全重写的框架哦。这意味着什么呢？就是它让应用变得更快啦，体积更小了，而且更加可靠。我们写出来的代码也会更加一致，更符合我们的习惯。比如在代码结构
    • Svelte 最新中文文档（4）—— 符文（Runes）下
      前言Svelte，一个非常“有趣”、用起来“很爽”的前端框架。从Svelte诞生之初，就备受开发者的喜爱，根据统计，从2019年到2024年，连续6年一直是开发者最感兴趣的前端框架No.1：Svelte以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级Web项目，也是我做个人项目的首选技术栈。目前Svelte基于Svelte5发布了最新的官方文档，但却缺少对应的中文
    • 字节二面 Redstone Monstrosity 前端面试
      1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
    • ODOO不同版本与平台选择 chouchengyin2080 c#操作系统运维
      1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架
    • 基于nodejs+vue的美妆彩妆网站的设计与实现(源码+LW+调试文档+讲解等) 程序员gelei nodejs毕业设计项目vue.js前端javascript
      目录：博主介绍：完整视频演示：系统技术介绍：后端Java介绍前端框架Vue介绍具体功能截图：部分代码参考：Mysql表设计参考：项目测试：项目论文：为什么选择我：源码获取：博主介绍：博主：程序员gelei：全网拥有20W+粉丝、CSDN作者、博客专家、全栈领域优质创作者、平台优质Java创作者、专注于Java、小程序、python、安卓技术领域和毕业项目实战✌Java精品实战案例《1000套》20
    • web前端达到什么水平，才能找到工作？ cj瑾瑜 前端htmljavascriptcsscss3
      一、前端是什么？前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。（核心技术：HTML、CSS、JavaScript）核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义
    • 前后端分离，Asp.net core webapi 如何配置跨域 代码掌控者 C#asp.netcore.netcore经验分享c#
      前言可以说，前后端分离已经成为当今信息系统项目开发的主流软件架构模式，微服务的出现，让前后端分离发展更是迅速，大量优秀的前端框架如vue.js、react的出现，也让前后端分离趋势加快。所谓的前后端分离软件架构模式，就是指将前端和后端的开发完全分离，后端负责提供API接口和数据处理，而前端通过各种现代的JavaScript技术如AJAX或者Fetch等，来调用后端提供的API接口获取数据，从而构建
    • 基于java+ssm+vue毕业设计源码合集（1-100）源码+文档+调试+讲解 小程序设计 javajava课程设计vue.js
      技术栈介绍：SSM（Spring、SpringMVC、MyBatis）框架搭配Vue前端框架是当前较为流行的项目开发技术栈。以下是详细的技術列表：1.后端技术：-Spring：一个开源的Java平台，提供了用于构建企业级应用程序的全面解决方案。-SpringMVC：Spring框架的一个子项目，用于构建Web应用程序，提供了处理请求、数据验证、视图解析等功能的模块。-MyBatis：一个优秀的持久
    • 【 前端优化】Vue 3 性能优化技巧 Passion不晚 前端vue.jsjavascript前端
      Vue3性能优化技巧：让你的应用飞起来！大家好！今天我想跟大家分享一些关于Vue3性能优化的实用技巧。Vue3带来了很多新的特性和改进，但只有了解并应用这些优化技巧，我们才能真正发挥它们的优势，打造更高效的应用。接下来，我将深入探讨一些有效的性能优化策略，希望对你有所帮助！引言Vue3的发布让我们迎来了一个更加高效和灵活的前端框架。虽然Vue3本身已经进行了一些性能优化，但在实际开发中，我们仍然需
    • 前端框架有哪些？全面解析主流前端框架 weixin_51069555 前端框架
      一、ReactReact是由Facebook开发和维护的一个前端框架，它专注于构建用户界面。React采用组件化的开发模式，允许开发者将用户界面拆分成多个可复用的组件。主要特点组件化:React的核心是组件，它允许开发者将界面拆分成独立的、可复用的组件，简化了UI的管理和维护。虚拟DOM:React使用虚拟DOM技术，通过在内存中创建一个虚拟的DOM树，减少了与真实DOM的直接操作，提高了性能。单
    • (附论文)基于ssm的高校大学生党建系统(688) KK ??? 媒体学习开发语言springjava
      获取源码请滑到最底部访问官网项目配套调试视频和相对应的软件安装包1、项目描述具体请看视频演示2、项目开发工具开发工具：Idea或Eclipse数据库：MysqlJar包仓库：Maven前端框架：Vue2后端框架：SSM3、项目图片4、演示视频(附论文)基于ssm的高校大学生党建系统(688)
    • Vue 生命周期与 TypeScript：深入理解组件生命周期 shiming8879 typescriptvue.js前端
      Vue生命周期与TypeScript：深入理解组件生命周期引言Vue.js作为一种流行的前端框架，其组件生命周期是开发过程中不可或缺的一部分。理解并正确利用Vue的生命周期，可以帮助开发者构建更加健壮和可维护的应用。而当TypeScript与Vue结合使用时，这种优势得到了进一步的增强。TypeScript作为一种强类型语言，提供了类型检查和代码清晰性，使得Vue组件的生命周期管理变得更加高效和可
    • 集合框架 天子之骄 java数据结构集合框架
         集合框架 集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。 从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。   简单介绍：   Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
    • Table Driven（表驱动）方法实例 bijian1013 javaenumTable Driven表驱动
      实例一： /** * 驾驶人年龄段 * 保险行业，会对驾驶人的年龄做年龄段的区分判断 * 驾驶人年龄段：01-[18,25);02-[25,30);03-[30-35);04-[35,40);05-[40,45);06-[45,50);07-[50-55);08-[55,+∞) */ public class AgePeriodTest { //if...el
    • Jquery 总结 cuishikuan javajqueryAjaxWebjquery方法
      1.$.trim方法用于移除字符串头部和尾部多余的空格。如：$.trim('   Hello   ') // Hello2.$.contains方法返回一个布尔值，表示某个DOM元素（第二个参数）是否为另一个DOM元素（第一个参数）的下级元素。如：$.contains(document.documentElement, document.body); 3.$
    • 面向对象概念的提出 麦田的设计者 java面向对象面向过程
              面向对象中，一切都是由对象展开的，组织代码，封装数据。   在台湾面向对象被翻译为了面向物件编程，这充分说明了，这种编程强调实体。       下面就结合编程语言的发展史，聊一聊面向过程和面向对象。      c语言由贝尔实
    • linux网口绑定 被触发 linux
      刚在一台IBM Xserver服务器上装了RedHat Linux Enterprise AS 4，为了提高网络的可靠性配置双网卡绑定。 一、环境描述 我的RedHat Linux Enterprise AS 4安装双口的Intel千兆网卡，通过ifconfig -a命令看到eth0和eth1两张网卡。 二、双网卡绑定步骤： 2.1 修改/etc/sysconfig/network
    • XML基础语法 肆无忌惮_ xml
      一、什么是XML？ XML全称是Extensible Markup Language，可扩展标记语言。很类似HTML。XML的目的是传输数据而非显示数据。XML的标签没有被预定义，你需要自行定义标签。XML被设计为具有自我描述性。是W3C的推荐标准。   二、为什么学习XML？ 用来解决程序间数据传输的格式问题 做配置文件 充当小型数据库   三、XML与HTM
    • 为网页添加自己喜欢的字体 知了ing 字体 秒表 css
      @font-face { font-family: miaobiao;//定义字体名字 font-style: normal; font-weight: 400; src: url('font/DS-DIGI-e.eot');//字体文件 } 使用： <label style="font-size:18px;font-famil
    • redis范围查询应用-查找IP所在城市 矮蛋蛋 redis
      原文地址： http://www.tuicool.com/articles/BrURbqV 需求 根据IP找到对应的城市 原来的解决方案 oracle表（ip_country）： 查询IP对应的城市： 1.把a.b.c.d这样格式的IP转为一个数字，例如为把210.21.224.34转为3524648994 2. select city from ip_
    • 输入两个整数， 计算百分比 alleni123 java
      public static String getPercent(int x, int total){ double result=(x*1.0)/(total*1.0); System.out.println(result); DecimalFormat df1=new DecimalFormat("0.0000%");
    • 百合——————>怎么学习计算机语言 百合不是茶 java 移动开发
          对于一个从没有接触过计算机语言的人来说，一上来就学面向对象，就算是心里上面接受的了，灵魂我觉得也应该是跟不上的，学不好是很正常的现象，计算机语言老师讲的再多，你在课堂上面跟着老师听的再多，我觉得你应该还是学不会的，最主要的原因是你根本没有想过该怎么来学习计算机编程语言，记得大一的时候金山网络公司在湖大招聘我们学校一个才来大学几天的被金山网络录取，一个刚到大学的就能够去和
    • linux下tomcat开机自启动 bijian1013 tomcat
      方法一： 修改Tomcat/bin/startup.sh 为: export JAVA_HOME=/home/java1.6.0_27 export CLASSPATH=$CLASSPATH:$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:. export PATH=$JAVA_HOME/bin:$PATH export CATALINA_H
    • spring aop实例 bijian1013 javaspringAOP
      1.AdviceMethods.java package com.bijian.study.spring.aop.schema; public class AdviceMethods { public void preGreeting() { System.out.println("--how are you!--"); } } 2.beans.x
    • [Gson八]GsonBuilder序列化和反序列化选项enableComplexMapKeySerialization bit1129 serialization
      enableComplexMapKeySerialization配置项的含义  Gson在序列化Map时，默认情况下，是调用Key的toString方法得到它的JSON字符串的Key，对于简单类型和字符串类型，这没有问题，但是对于复杂数据对象，如果对象没有覆写toString方法，那么默认的toString方法将得到这个对象的Hash地址。   GsonBuilder用于
    • 【Spark九十一】Spark Streaming整合Kafka一些值得关注的问题 bit1129 Stream
      包括Spark Streaming在内的实时计算数据可靠性指的是三种级别： 1. At most once，数据最多只能接受一次，有可能接收不到 2. At least once, 数据至少接受一次，有可能重复接收 3. Exactly once  数据保证被处理并且只被处理一次，   具体的多读几遍http://spark.apache.org/docs/lates
    • shell脚本批量检测端口是否被占用脚本 ronin47
      #!/bin/bash cat ports |while read line do#nc -z -w 10 $line nc -z -w 2 $line 58422>/dev/null2>&1if[ $?-eq 0]then echo $line:ok else echo $line:fail fi done 这里的ports 既可以是文件
    • java-2.设计包含min函数的栈 bylijinnan java
      具体思路参见：http://zhedahht.blog.163.com/blog/static/25411174200712895228171/ import java.util.ArrayList; import java.util.List; public class MinStack { //maybe we can use origin array rathe
    • Netty源码学习-ChannelHandler bylijinnan javanetty
      一般来说，“有状态”的ChannelHandler不应该是“共享”的，“无状态”的ChannelHandler则可“共享” 例如ObjectEncoder是“共享”的, 但 ObjectDecoder 不是 因为每一次调用decode方法时，可能数据未接收完全（incomplete）， 它与上一次decode时接收到的数据“累计”起来才有可能是完整的数据，是“有状态”的 p
    • java生成随机数 cngolon java
      方法一： /** * 生成随机数 * @author [email protected] * @return */ public synchronized static String getChargeSequenceNum(String pre){ StringBuffer sequenceNum = new StringBuffer(); Date dateTime = new D
    • POI读写海量数据 ctrain 海量数据
      import java.io.FileOutputStream; import java.io.OutputStream; import org.apache.poi.xssf.streaming.SXSSFRow; import org.apache.poi.xssf.streaming.SXSSFSheet; import org.apache.poi.xssf.streaming
    • mysql 日期格式化date_format详细使用 daizj mysqldate_format日期格式转换日期格式化
      日期转换函数的详细使用说明  DATE_FORMAT(date,format) Formats the date value according to the format string. The following specifiers may be used in the format string. The&n
    • 一个程序员分享8年的开发经验 dcj3sjt126com 程序员
        在中国有很多人都认为IT行为是吃青春饭的，如果过了30岁就很难有机会再发展下去!其实现实并不是这样子的，在下从事.NET及JAVA方面的开发的也有8年的时间了，在这里在下想凭借自己的亲身经历，与大家一起探讨一下。 明确入行的目的 很多人干IT这一行都冲着“收入高”这一点的，因为只要学会一点HTML, DIV+CSS，要做一个页面开发人员并不是一件难事，而且做一个页面开发人员更容
    • android欢迎界面淡入淡出效果 dcj3sjt126com android
      很多Android应用一开始都会有一个欢迎界面，淡入淡出效果也是用得非常多的，下面来实现一下。 主要代码如下： package com.myaibang.activity; import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.CountDown
    • linux 复习笔记之常见压缩命令 eksliang tar解压linux系统常见压缩命令linux压缩命令tar压缩
      转载请出自出处:http://eksliang.iteye.com/blog/2109693 linux中常见压缩文件的拓展名 *.gz gzip程序压缩的文件 *.bz2 bzip程序压缩的文件 *.tar tar程序打包的数据，没有经过压缩 *.tar.gz tar程序打包后，并经过gzip程序压缩 *.tar.bz2 tar程序打包后，并经过bzip程序压缩 *.zi
    • Android 应用程序发送shell命令 gqdy365 android
      项目中需要直接在APP中通过发送shell指令来控制lcd灯，其实按理说应该是方案公司在调好lcd灯驱动之后直接通过service送接口上来给APP，APP调用就可以控制了，这是正规流程，但我们项目的方案商用的mtk方案，方案公司又没人会改，只调好了驱动，让应用程序自己实现灯的控制，这不蛋疼嘛！！！！ 发就发吧！ 一、关于shell指令： 我们知道，shell指令是Linux里面带的
    • java 无损读取文本文件 hw1287789687 读取文件无损读取读取文本文件charset
      java 如何无损读取文本文件呢？ 以下是有损的 @Deprecated public static String getFullContent(File file, String charset) { BufferedReader reader = null; if (!file.exists()) { System.out.println("getFull
    • Firebase 相关文章索引 justjavac firebase
      Awesome Firebase 最近谷歌收购Firebase的新闻又将Firebase拉入了人们的视野，于是我做了这个 github 项目。 Firebase 是一个数据同步的云服务，不同于 Dropbox 的「文件」，Firebase 同步的是「数据」，服务对象是网站开发者，帮助他们开发具有「实时」（Real-Time）特性的应用。 开发者只需引用一个 API 库文件就可以使用标准 RE
    • C++学习重点 lx.asymmetric C++笔记
      1.c++面向对象的三个特性：封装性，继承性以及多态性。   2.标识符的命名规则：由字母和下划线开头，同时由字母、数字或下划线组成；不能与系统关键字重名。   3.c++语言常量包括整型常量、浮点型常量、布尔常量、字符型常量和字符串性常量。   4.运算符按其功能开以分为六类：算术运算符、位运算符、关系运算符、逻辑运算符、赋值运算符和条件运算符。 &n
    • java bean和xml相互转换 q821424508 javabeanxmlxml和bean转换java bean和xml转换
      这几天在做微信公众号 做的过程中想找个java bean转xml的工具，找了几个用着不知道是配置不好还是怎么回事，都会有一些问题， 然后脑子一热谢了一个javabean和xml的转换的工具里，自己用着还行，虽然有一些约束吧 ， 还是贴出来记录一下      顺便你提一下下，这个转换工具支持属性为集合、数组和非基本属性的对象。   packag
    • C 语言初级 位运算 1140566087 位运算c
      第十章 位运算   1、位运算对象只能是整形或字符型数据，在VC6.0中int型数据占4个字节   2、位运算符： 运算符 作用 ~ 按位求反 << 左移 >> 右移 & 按位与 ^ 按位异或 | 按位或 他们的优先级从高到低；   3、位运算符的运算功能： a、按位取反： ~01001101 = 101
    • 14点睛Spring4.1-脚本编程 wiselyman spring4
      14.1 Scripting脚本编程 脚本语言和java这类静态的语言的主要区别是:脚本语言无需编译,源码直接可运行; 如果我们经常需要修改的某些代码,每一次我们至少要进行编译,打包,重新部署的操作,步骤相当麻烦; 如果我们的应用不允许重启,这在现实的情况中也是很常见的; 在spring中使用脚本编程给上述的应用场景提供了解决方案,即动态加载bean; spring支持脚本
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他