2023-07-25发表2023-10-19更新技术分享2 分钟读完 (大约238个字)

go 跨域问题解决

我在go中其实已经写好了corsMiddleware中间件，只需要给每一个请求都套上即可。

func main() {
	booksHandler := &booksHandler{}
	bookHandler := &bookHandler{}
	articleHandler := &articleHandler{}
	registerHandler := &registerHandler{}
	loginHandler := &loginHandler{}
	searchHandler := &searchHandler{}
	http.Handle("/api/register", registerHandler)
	http.Handle("/api/login", corsMiddleware(loginHandler))
	http.Handle("/api/books", corsMiddleware(authMiddleware(booksHandler)))
	http.Handle("/api/search/", http.StripPrefix("/api/search", corsMiddleware(authMiddleware(searchHandler))))
	http.Handle("/api/book/", http.StripPrefix("/api/book", corsMiddleware(authMiddleware(bookHandler))))
	http.Handle("/api/article/", http.StripPrefix("/api/article", corsMiddleware(authMiddleware(articleHandler))))
	log.Fatal(http.ListenAndServe(":8089", nil))
}

原来问题其实出在了这里/api/article/以及前端代码中的路径，需要对应才可以

const ApiService = {
    register: (username, password) => api.post("/api/register/", { username, password }),
    login: (username, password) => api.post("/api/login/", { username, password }),
    getBooks: (page) => api.get("/api/books/", { params: { page } }),
    searchBooks: (search_keyword) => api.get("/api/search/", { params: { search_keyword } }),
    getBookDetails: (book_id) => api.get("/api/book/", { params: { book_id } }),
    getArticleDetails: (article_id) => api.get("/api/article/", { params: { article_id } }),
}

本地测试的时候发现前端vue无法根据set-cookie设置cookie 于是各种修改，最后发现应该增加cookie的path和httponly就可以了。

2023-05-22发表2023-10-19更新技术分享5 分钟读完 (大约773个字)

go+vue实现掘金小册阅读

之前通过爬虫采集了一些掘金小册的内容，当时只保存了对应的html。
一直希望可以找个开源的项目将掘金小册展示出来供自己阅读，但是翻遍了GitHub都没有找到我喜欢的。
所以只能自己开发。

技术选取

本来是想要用python+html实现一个简单的页面：当时的构思是用fastapi构建接口，然后利用html+jquery+bootstrap实现前端页面。

但是感觉都2023年了还是这样实现有点low，然后因为工作有点忙以及需要打游戏，就搁置了。

但是最近又想要实现这个项目了。

这次选取的是利用go实现接口，然后用vue构建前端页面。

接口

大概实现了注册，登录，获取所有图书信息，获取单独图书信息，获取文章详情这几个接口

获取所有图书信息

请求方式：GET
URL：/books
描述：用于获取所有图书的信息
返回数据格式：
- [{“book_name”:””, “book_id”:””, “article_count”:””, “tag”:””}]

分页获取图书信息

请求方式：GET
URL：/books?page={page_number}
描述：用于分页获取图书的信息，每页返回10条数据
参数：
- page_number (必需)：页码，表示需要获取的页数
返回数据格式：
- [{“book_name”:””, “book_id”:””, “article_count”:””, “tag”:””}]

获取书籍详情

请求方式：GET
URL：/book?book_id={book_id}
描述：用于获取特定书籍的详细信息
参数：
- book_id (必需)：书籍ID，表示需要获取的书籍的唯一标识
返回数据格式：
- {“book”:{“book_name”:””, “book_id”:””, “article_count”:””, “tag”:””}, “article”:[{“id”: 1,”book_id”: “”,”title”: “”,”content”: “”,”num”: 1 }]}

获取文章详情

请求方式：GET
URL：/article?article_id={article_id}
描述：用于获取特定文章的详细信息
参数：
- article_id (必需)：文章ID，表示需要获取的文章的唯一标识
返回数据格式：
- {“id”:””, “book_id”:””, “title”:””, “content”:””, “num”: “”}

注册

请求方式：POST
URL：/register
描述：用于注册
参数：
- username (必需)：用户名
- password (必需)：用户密码

前端

这里我选择的是利用vue cli创建项目，然后通过axios构建请求获取数据。

踩坑

一个很难受的坑就是跨域请求。这里是问了一下做前端的同事，然后他跟我说用proxy代理解决。但是我设置代理后，发现response会返回set-cookie，但是浏览器并没有设置，最后发现是我的cookie设置有问题
1
2
3
4
5
cookie := &http.Cookie{
Name: "auth",
Value: cookieValue,
Expires: time.Now().Add(24 * time.Hour), // 设置Cookie过期时间
}
这里我没有加Path以及HttpOnly，然后就设置不上去，加上后就可以了。