Install Icon

1

npm install react-icons

Add Sidebar Item

Modify file conmponent/layout/Sidebar.tsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

import { BsHouseFill, BsBellFill } from 'react-icons/bs'
import { FaUser } from 'react-icons/fa'
import { BiLogOut } from 'react-icons/bi'

import SidebarLog from './SidebarLogo'
import SidebarItem from './SidebarItem'
import SiderbarTweetButton from './SiderbarTweetButton'

const Sidebar = () => {
    const items = [
        {
            label: 'Home',
            href:'/',
            icon: BsHouseFill
        },
        {
            label: 'Notifications',
            href:'/notifications',
            icon: BsBellFill
        },       
        {
            label: 'Profile',
            href:'/users/123',
            icon: FaUser
        },
        
    ]
    
    return(
        <div className='col-span-1 h-full pr-4 pr-6'>
          <div  className='flex flex-col items-end'>
            <div  className='space-y-2 lg:w-[230px]'>
                <SidebarLog />
                {items.map((item) =>(
                    <SidebarItem
                       key={item.href}
                       href={item.href}
                       label={item.label}
                       icon={item.icon}
                    />
                ))}

                <SidebarItem onclick={() => {}} icon={ BiLogOut } label='Logout' href='/'  />
                <SiderbarTweetButton />
            </div>
          </div>
        </div>
    );
}

export default Sidebar

Add basic layout

Add file components/Layout.tsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import Sidebar from "./layout/Siderbar";

interface LayoutProps{
    children: React.ReactNode;
}

const Layout:React.FC<LayoutProps> = ({ children }) => {
   return (
     <div className="h-screen bg-black">
        <div className="container h-full mx-auto xl:px-30 max-w-6xl">
            <div className="grid grid-cols-4 h-full">
                <Sidebar />
                <div className="
                   col-span-3
                   lg:col-span-2
                   border-x-[1px]
                   border-neutral-800
                ">
                    { children }
                </div> 
            </div>  
        </div>
     </div>
   );
}

export default Layout;

Add file conmponent/layout/Sidebar.tsx:

1
2
3
4
5
6
7
8
9

const Sidebar = () => {
    return(
        <div>

        </div>
    );
}

export default Sidebar

Install Next.Js

1

npx create-next-app@13.0.0 --typescript

Install tailwindcss

1
2

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Initial page

modify pages/index.js

1
2
3
4
5
6
7

export default function Home() {
  return (
    <div className="text-3xl text-sky-500">
      Hello World!
    </div>
  )
}

背景

很多提供网络服务的网站都有自己的Status页面，这个页面可以帮助用户了解网络服务的稳定性，如果自己要搭建的话，effort有点大。近期发现，有现成的网络服务可以很快搭建一个status的页面，要求不高的话，是免费的。介绍一下设置过程。

注册

访问 https://uptimerobot.com ，注册账户：

1. Give Direction: Describe the desired style in detail, or reference a relevant persona.

   给出方向：详细描述所需的风格，或参考相关的人物角色。

2. Specify Format: Define what rules to follow, and the required structure of the response.

   指定格式：定义要遵循的规则以及所需的响应结构。

3. Provide Examples: Insert a diverse set of test cases where the task was done correctly.

   提供示例：插入正确完成任务的一组不同的测试用例。

4. Evaluate Quality: Identify errors and rate responses, testing what drives performance.

   评估质量：识别错误并对响应进行评级，测试驱动性能的因素。

5. Divide Labor: Split tasks into multiple steps, chained together for complex goals.

   分工：将任务分成多个步骤，链接在一起以实现复杂的目标。

1. 背景

在部署时，程序需要根据当前环境，设置不同参数，比如数据库，DEBUG是否打开等。

2. 实现方式

在构建Docker的时候设置环境变量：

1
2
3
4
5

RUN python manage.py collectstatic

ENV DJANGO_DEBUG_FALSE=1
ENV DJANGO_SECRET_KEY=sekrit 
ENV DJANGO_ALLOWED_HOST=localhost

在superlists/settings.py中添加判断：

1
2
3
4
5
6
7
8
9
10

import os
[...]
if "DJANGO_DEBUG_FALSE" in os.environ:
    DEBUG = False
    SECRET_KEY = os.environ["DJANGO_SECRET_KEY"]
    ALLOWED_HOSTS = [os.environ["DJANGO_ALLOWED_HOST"]]
else:
    DEBUG = True
    SECRET_KEY = "insecure-key-for-dev"
    ALLOWED_HOSTS = []

Policies

Appropriate Storage Policies

1. Information must only be stored on company authorised storage media. USB sticks and other temporary storage solutions should not be used to hold corporate data.
2. The appropriate storage solution for the information must be used.  This may be a structured database, Sharepoint, shared drives, document management systems, proprietary system or  archive solution.

Background

Certain type of data created as part of normal business activities might be used enterprise wide, whilst others may only be useful locally within a department or geographic region. The data maybe structured, for example an order held in the SAP system, or unstructured such as design document. The data can also differ from a retention and usage and perspective. Taking this into account different categories of data exist that have different management requirements.

Categories

摘录自 HTTP API Design Guide

前言

我们的目标是一致性，专注业务逻辑同时避免设计上的空想，我们一直在寻找一种良好的，统一的，显而易见的API设计方式，未必只有一种方式。

以下内容供参考，另外，还可以看看大厂的设计规范：

• Microsoft REST API Guidelines
• Google API Design Guide

内容

• 返回合适的状态码

  为每一次的响应返回合适的HTTP状态码. 成功的HTTP响应应该使用如下的状态码:

  • 200: GET请求成功, 以及DELETE或 PATCH 同步请求完成

  • 201: POST 同步请求完成

  • 202: POST, DELETE, 或 PATCH 异步请求将要完成

  • 206: GET 请求成功, 这里只是一部分状态码: 更多

  参考 状态描述

• 提供全部可用的资源

1. 背景

Django 程序如何部署有各种方法，我们今天使用Docker来部署

2. Docker打包

• 将Django文件都移动到 src 子目录

• 编写 Dockerfile 文件，输入以下内容：

  1 2 3 4 5 6 7 8 9 10 11

  FROM python:slim RUN python -m venv /venv ENV PAth='/venv/bin;4path' COPY requirements.txt requirements.txt RUN pip install -i https://pypi.tuna.tsinghua.edu.cn/simple -r requirements.txt COPY src /src WORKDIR /src CMD python manage.py migrate --noinput CMD python manage.py runserver 0.0.0.0:8888

• 编写 requirement.txt 文件，输入以下内容：

  1	django==4.2.7

• 打包docker文件：

  1	sudo docker build -t superlists .

  superlists 为docker名

• 用前台方式运行docker：

  1	sudo docker run -p 8888:8888 --mount type=bind,source=./src/db.sqlite3,target=/src/db.sqlite3 -it superlists

3. 安装guicorn

• 添加 guicorn 到requirement.txt 文件：

  1 2	django==4.2.7 gunicorn==21.2.0

• 修改 Dockerfile 文件，替换最后一条语句：

  1	CMD gunicorn --bind :8888 superlists.wsgi:application

• 打包docker文件：

  1	sudo docker build -t superlists .

• 用前台方式运行docker：

  1	sudo docker run -p 8888:8888 --mount type=bind,source=./src/db.sqlite3,target=/src/db.sqlite3 -it superlists

发现静态文件css没有加载，继续。

4. 安装Whitenoise

• 继续修改requirement.txt :

  1 2 3

  django==4.2.7 gunicorn==21.2.0 whitenoise==6.6.0

• 修改 src/superlists/settings.py，添加这个中间件：

  1 2 3 4 5

  MIDDLEWARE = [ "django.middleware.security.SecurityMiddleware", "whitenoise.middleware.WhiteNoiseMiddleware", "django.contrib.sessions.middleware.SessionMiddleware", [...]

• 打包docker文件：

  1	sudo docker build -t superlists .

  superlists 为docker名

• 用前台方式运行docker：

  1	sudo docker run -p 8888:8888 --mount type=bind,source=./src/db.sqlite3,target=/src/db.sqlite3 -it superlists

成功加载。