GitHub相关

在GitHub上创建新的仓库

本地创建项目

将本地仓库与远程仓库相关联起来
命令:本地与远程仓库相关联

git remote add origin git@github.com:hannah-lin-sama/node-notebook.git

## 查看远程仓库信息
git remote -v

获取远程分支命名:

 git fetch

查看所有分支命令

 git branch -a

本地默认的分支是master,而GitHub如今的主分支名字为main;
本地创建main分支

git branch main

将本地的main与远程的main分支关联起来

git push --set-upstream origin main

##
 git branch --set-upstream-to=origin/main main

将本地代码推送到远程仓库

git add .
git commit -m "说明,后端项目搭建"
## 将项目推送到远程仓库
git push
## 若推送失败,可pull拉取最新代码后再推送,若还是失败,便强制推送
git pull
## 因为是首次推送上去,便使用了强制推送上去,若在实际的项目,尽量避免使用强制脱水
git push -f origin main

react利用axios请求数据

react项目安装axios

yarn add axios --save

src\views\First\index.tsx

import {useEffect} from 'react';
import {Link} from 'react-router-dom';
import Axios from 'axios';
let qs = require('querystring');

Axios.defaults.baseURL = 'http://localhost:9000';
Axios.defaults.timeout = 5000;
export default function First(props:any){
  const {search} = props.history.location;
  console.log('参数',qs.parse(search.slice(1)));

  function getNoteEvent(){
    Axios.get('/getnoteevent').then(res => {
      console.log(res.data);
      
    })
  }
  function getUser(){
    Axios.get('/getalluser').then(res => {
      console.log(res.data);
      
    })
  }
  useEffect(() => {
    getNoteEvent();
    getUser();
  }, [])

  return(
    <>
    <h2>First组件</h2>
    <Link to='/login'>跳转登录页</Link>
    </>
  )
}

将请求回来的数据展示在页面上

src\views\First\index.tsx

import {useState, useEffect} from 'react';
import {Link} from 'react-router-dom';
import Axios from 'axios';
import './index.css';
let qs = require('querystring');


Axios.defaults.baseURL = 'http://localhost:9000';
Axios.defaults.timeout = 5000;
export default function First(props:any){
  const [noteList, setNoteList] = useState([]);
  const {search} = props.history.location;
  console.log('参数',qs.parse(search.slice(1)));

  function getNoteEvent(){
    Axios.get('/getnoteevent').then(res => {
      console.log(res?.data);
      setNoteList(res?.data || [])
    })
  }
  function getUser(){
    Axios.get('/getalluser').then(res => {
      console.log(res.data);
      
    })
  }
  useEffect(() => {
    getNoteEvent();
    getUser();
  }, [])

  return(
    <>
    <h2>First组件</h2>
    <h4>备忘录</h4>
    {
      noteList && noteList?.map((item, index) => {
        return(
          <div key={item['v_id'] + index} className="noteEveryList">
            <h4>{item['v_event_title']}</h4>
            <div className="noteCreateTimeContainer">
              <span className='noteCreateTimeContent'>创建时间:{item['v_event_createTime']}</span>
            </div>

          <span className='noteContent'> {item['v_event_note']}</span>
          </div>
        )
      })
    }
    <Link to='/login'>跳转登录页</Link>
    </>
  )
}

src\views\First\index.css

.noteEveryList {
  border: 1px solid gray;
  padding-left: 10px;
  padding-right: 10px;
}
h4{
  margin: 4px;
}
.noteCreateTimeContainer {
  font-size: 12px;
  text-align: right;
}
.noteCreateTimeContent{
  display: inline-block;
  margin-bottom: 10px;
}
.noteContent {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 14px;
}

node解决跨域问题

在node创建web服务器进行跨域设置

  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
  res.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");